Promise一直都有在用,但是也就停留在会用,会调其几个api上。
本文再次梳理一下Promise知识点,争取做到知其所以然。
首先,Promise是一个对象,那么我们先把其实例创建出来:
const promise = new Promise(function(resolve, reject){
//①
if (/* 异步操作成功 */) {
resolve(value);//value就是异步请求拿到的结果
} else {
reject(error);
}
})
我们可以看到,Promise构造函数接受一个函数作为参数,该函数的两个参数分别是resolve和reject。它们是两个函数,由JavaScript引擎提供,不用自己去定义。(resolve、reject这两个方法名是约定俗成的)
我们用Promise的目的有两个:一是发起异步请求的,二是拿到请求结果去做一些其他操作。
Promise构造函数接收的这个参数就可以满足我们这两个需求,一我们的的异步请求在参数内部①处发起,然后拿到结果之后通过resolve/reject函数给它传出去。
注1:resolve()调用了之后,Promise的状态就由pending=>fulfilled;reject()调用了之后,Promise的状态就由pending=>rejected;状态变更了之后我们就可以调用Promise.prototype.then()了。
注2:Promise new了之后①中的代码就会立即执行
然后then()登场了,
then(resolve,reject)
then接收两个回调函数作为参数,resolve是必传,reject是可选
注3:这里的resolve和reject的需要自己定义的,名字也不一定是resolve,reject(可以是then(xxx,xxxx)),只不过这两个名字也是约定俗成的。
注4:这里的执行顺序也需要留意一下:
let promise = new Promise(function(resolve, reject){
console.log(1);
resolve()
});
promise.then(() => console.log(2));
console.log(3)
//1 3 2
在Promise new之后会立即执行,所以首先输出 1 。然后,then方法指定的回调函数将在当前脚本所有同步任务执行完后才会执行,所以 2 最后输出。
注3:reject回调和catch区别:reject后的东西,一定会进入then中的第二个回调,如果then中没有写第二个回调,则进入catch
有些错误(比如断网等)只会进入catch而不进入第二个回调
Promise静态方法:
Promise.resolve和Promise.reject
辅助创建 resolved 和 reject 方法:
const p1 = Promise.resolve("success!!!!")
p1.then(function(res){
console.log(res)
})
Promise.all
let p1 = new Promise((resolve, reject) => {
resolve('成功了')
})
let p2 = new Promise((resolve, reject) => {
resolve('success')
})
let p3 = Promse.reject('失败')
Promise.all([p1, p2]).then((result) => {
console.log(result) //['成功了', 'success']
}).catch((error) => {
console.log(error)
})
Promise.all([p1,p3,p2]).then((result) => {
console.log(result)
}).catch((error) => {
console.log(error) // '失败' 有一个失败就返回reject传回的信息
})
Promise.race
赛跑,顾名思义,返回最快返回结果的那个promise的值,不管是成功还是失败哦
let p1 = new Promise((resolve, reject) => {
setTimeout(() => {
resolve('成功')
},1000)
})
let p2 = new Promise((resolve, reject) => {
setTimeout(() => {
reject('失败')
}, 500)
})
Promise.race([p1, p2]).then((result) => {
console.log(result)
}).catch((error) => {
console.log(error) // '失败'
})
手写Promise
async/await
async修饰的函数会返回一个Promise对象
eg:
async function test() {
return "=_=";
}
const result = test();
console.log(result); //Promise {<fulfilled>: "=_="}
如果在函数中 return 一个直接量,async 会把这个直接量通过** Promise.resolve()** 封装成 Promise 对象;
如果没return,那么返回Promise {<fulfilled>: undefined}