Promise
一、解决问题
我们知道Promise是javaScript中异步编程的一种解决方法。在介绍Promise前，我们思考下Promise 的诞生解决了哪些问题呢？
ES6之前，我们使用回调函数和事件处理异步操作，用来解决javaScript单线程运行时可能导致的UI渲染阻塞的问题
事件：对象的某个属性是一个函数，当发生某种行为时，运行该函数
callback回调函数：运行某个函数以实现某个功能的时候，传入一个函数作为参数，在某个特定条件下触发该函数
但是，使用回调函数也带来几个问题：
- 回调函数放在参数的位置，嵌套回调造成回调地狱
- 回调函数的代码和开始任务代码不在同一事件循环中，异步同步任务不能联系
- 处理并行任务棘手，请求之间互不依赖
二、解决方案——异步模型
-
ECMA将异步操作分为三个状态：
pedding——等待状态（未决阶段），表示事件还在进行中resolved——已经处理（已决阶段），表示事件产生预期的结果rejected——已拒绝（已决阶段），表示事件产生偏离预期的结果我们使用网络请求解释三种状态，请求的过程是pedding状态，请求结果状态码为200为resolved状态，请求结果状态码是500为rejected状态
-
pedding状态具有一定控制走向的能力resolve方法——将事件推向resolved状态，并且可以传递一些数据reject方法——将事件推向rejected状态，并且附带一些错误信息只有异步操作的结果，可以决定当前是哪一种状态，任何其他操作都无法改变这个状态
-
一旦状态更改，不再变化。任何时候都可以获得结果
-
事件到达已决阶段需要进行后续处理
thenable函数——作为resolved状态的后续处理catchable函数——作为rejected状态的后续处理
三、基本用法
Promise是一个容器，保存着在某个未来结束的异步操作的结果
let promise = new Promise((resolve, reject) => {
/*
1.函数内部代码立即执行，不可取消
2.放置ajax请求等异步操作的位置
3.通过调用resolve函数将Promise推向已决的resolved状态
4.通过调用rejected将Promise推向已决的rejected状态
*/
if(/*异步操作成功*/) {
resolve(data)
} else {
reject(error)
}
})
promise.then((res) => {
/*
1.thenable函数，进入resolved状态立即执行
2.当前为pedding状态，加入任务队列
*/
console.log("回调成功")
}).catch((error) => {
/*
1.catchable函数，进入rejected状态立即执行
2.当前为pedding状态，加入任务队列
*/
console.log("回调失败")
})
四、Promise 链式调用
promise实例，每次then方法或者catch方法结束后都会返回一个新的Promise实例
如果前一个promise实例的状态是 resolved 并且then()的回调函数没有出错，将回调函数的返回值作为下一个then回调函数的参数
const myPromise = new Promise((resolve, reject) => {
resolve('helloWorld');
})
myPromise.then(res => {
console.log(res); // 'helloWorld'
return 1;
}).then(res => {
console.log(res); // 输出1
})
如果前一个promise实例的状态是 resolved 但是then()的回调函数发生错误，将抛出的错误信息作为下一个catch回调函数的参数
const myPromise = new Promise((resolve, reject) => {
resolve('helloWorld');
})
myPromise.then(res => {
console.log(res); // 'helloWorld'
throw new Error("test")
return 1;
}).then(res => {
console.log("data:",res);
}, error => {
console.log("error:", error) //error: Error: "test"
})
如果前一个promise实例的状态是 rejected 但是then()的没有处理错误的回调函数，将抛出的错误信息作为下一个catch回调函数的参数
const myPromise = new Promise((resolve, reject) => {
reject('helloWorld');
})
myPromise.then(res => {
console.log('helloWorld');
//上方触发了reject, 没有相对应的处理catchable函数
//错误直接抛给下一个Promise并触发下一个Promise的rejected状态
}).catch(error => {
console.log("error:",error); //error: helloWorld
})
如果在 then 中使用
return，那么 return 的值也会Promise.resove()包装
五、Promise API
(一) Promise.prototype.then()
then()方法的作用是为 Promise实例添加状态改变时的回调函数，
接收两个参数，resolved状态的回调函数和rejected状态的回调函数。第二个参数可选
then方法返回的是一个新的Promise实例，实现链式调用
getJSON("/posts.json").then(function(json) {
return json.post;
}).then(function(post) {
//将上一个回调函数结果作为参数传入第二个回调函数
});
(二)Promise.prototype.catch()
catch()方法用于指定发生错误时的回调函数，
异步操作抛出错误，状态变为rejected，立即调用catch()，并且可以捕获 promise实例中抛出的错误
在创建Promise实例传入的函数参数中, 如果代码报错, 则会立即触发reject方法
const promise = new Promise(function(resolve, reject) {
throw new Error('test');
});
promise.catch(function(error) {
console.log(error);
});
// Error test
(三) Promise.prototype.finally()
finally()方法用于指定Promise 对象都会执行的操作，不管最后状态如何
finally方法的回调函数不接受任何参数
romise
.then(result => {···})
.catch(error => {···})
.finally(() => {···})
(四) Promise.all()
Promise.all()方法用于将多个 Promise 实例，包装成一个新的 Promise 实例，
const p = Promise.all([p1, p2, p3]);
p的状态由p1、p2、p3决定，分成两种情况
（1）只有p1、p2、p3的状态都变成fulfilled，p的状态才会变成fulfilled，此时p1、p2、p3的返回值组成一个数组，传递给p的回调函数
（2）只要p1、p2、p3之中有一个被rejected，p的状态就变成rejected，此时第一个被reject的实例的返回值，会传递给p的回调函数
需要同时等待多个Promise异步操作完成以后再做某件事的话可以用到Promise.all()
const getGirlResponse = new Promise((resolve, reject) => {
setTimeout(() => {
resolve(Math.random() > 0.5 ? '1同意了' : '1拒绝表白');
}, 1000)
})
const getSecGirlResponse = new Promise((resolve, reject) => {
setTimeout(() => {
if(Math.random() > 0.5) {
resolve(Math.random() > 0.5 ? '2同意了' : '2拒绝表白');
} else {
reject("2打了你一巴掌")
}
}, 1000)
})
const getTrdGirlResponse = new Promise((resolve, reject) => {
setTimeout(() => {
resolve(Math.random() > 0.5 ? '3同意了' : '3拒绝表白');
}, 1000)
})
Promise.all([getGirlResponse, getSecGirlResponse, getTrdGirlResponse]).then(resp => {
console.log(resp);
}).catch(error => {
console.log(error);
})
(五) Promise.race()
Promise.race()方法同样是将多个 Promise 实例，包装成一个新的 Promise 实例
const p = Promise.race([p1, p2, p3]);
只要p1、p2、p3之中有一个实例率先改变状态，p的状态就跟着改变。率先改变的 Promise 实例的返回值，就传递给p的回调函数
let intervalTime = () => Math.random() * 2000
const getGirlResponse = new Promise((resolve, reject) => {
setTimeout(() => {
resolve(Math.random() > 0.5 ? '1同意了' : '1拒绝表白');
}, intervalTime())
})
const getSecGirlResponse = new Promise((resolve, reject) => {
setTimeout(() => {
resolve(Math.random() > 0.5 ? '2同意了' : '2拒绝表白');
}, intervalTime())
})
const getTrdGirlResponse = new Promise((resolve, reject) => {
setTimeout(() => {
resolve(Math.random() > 0.5 ? '3同意了' : '3拒绝表白');
}, intervalTime())
})
Promise.race([getGirlResponse, getSecGirlResponse, getTrdGirlResponse]).then(resp => {
console.log(resp);
}).catch(error => {
console.log(error);
})
(六)Promise.resolve()
Promise.resolve()方法将现有对象转为 Promise 对象
Promise.resolve()方法允许调用时不带参数，直接返回一个resolved状态的 Promise 对象
(七)Promise.reject()
Promise.reject(reason)方法也会返回一个新的 Promise 实例，该实例的状态为rejected
六、常见使用
(一)嵌套任务处理
//多个异步任务之间存在依赖性的
getJson("url")
.then(n => {getJson(n[0].url)})
.then(m => {getJson(m[0].url)})
.then(w => {getJson(w[0].url)})
.catch((error => {console.log("异常错误")}))
then方法返回一个promise对象，连续调用then方法就能链式调用promise- 多个异步任务中可能出现错误，只需要调用一个
catch方法并向其传入错误处理的回调函数
(二)并行处理任务
// 并行处理多个异步任务
Promise.all([getJson(url), getJson(url), getJson(url)])
.then((resule) => {
// 如果三个请求都响应成功
if (result[0] == 1 && result[1] == 1 && result[2] == 1) {
console.log("请求成功");
}
})
.catch((error) => {
console.log("异常错误");
});
七、实现 Promise
参考文档
https://blog.csdn.net/weixin_44238796/article/details/103159716