说明
ES6 从入门到精通系列（全23讲）学习笔记。
resolve 跟 reject
能将现有的任何对象转换成 promise 对象
let p =new Promise(resolve => resolve("kaimo")); console.log(p); p.then(res => { console.log(res) })
all
提供了并行的执行异步操作的行为，用于等资源都加载完了才进行操作，比如一些游戏等资源加载完才进行页面初始化。
let promise1 = new Promise((resolve, reject) => {}); let promise2 = new Promise((resolve, reject) => {}); let promise3 = new Promise((resolve, reject) => {}); let p4 = Promise.all([promise1, promise2, promise3]); p4.then(() => { // 三个都成功才算成功 }).catch(err => { // 一个失败则失败 })
race
给某个异步请求设置超时时间，并且在超时之后执行相应的操作
例子：请求图片资源
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <script> function requestImage(imgSrc) { return new Promise((resolve, reject) => { const img = new Image(); img.onload = function() { resolve(img); } img.src = imgSrc; }) } function timeout() { return new Promise((resolve, reject) => { setTimeout(() => { reject(new Error("图片请求超时")); }, 2000) }) } Promise.race([requestImage("https://kaimo313.github.io/blogs/img/avatar.jpg"), timeout()]).then(res => { console.log(res) document.body.appendChild(res); }).catch(err => { console.log(err) }) </script> </body> </html>
下面模拟超时，f12 找到 network 选择 slow 3g，禁用缓存
finally
finally() 方法返回一个 Promise。在 promise 结束时，无论结果是 fulfilled 或者是 rejected，都会执行指定的回调函数。这为在 Promise 是否成功完成后都需要执行的代码提供了一种方式。这避免了同样的语句需要在 then() 和 catch() 中各写一次的情况。
Promise.race([requestImage("https://kaimo313.github.io/blogs/img/avatar.jpg"), timeout()]).then(res => { console.log(res) document.body.appendChild(res); }).catch(err => { console.log(err) }).finally(() => { console.log("finally") })
