Promise详解
在promise之前,我们通过回调函数的方式来实现异步操作,当嵌套层数过多时,很容易就会造成回调地狱。promise的出现让异步操作更加优雅。
1. promise状态
promise有三个状态,fulfilled,rejected,pendding.
初始状态为pendding, 当promise被resolve之后,即成功之后状态则更改为fulfilled,当执行rejected后,则状态变为rejected。
2. promise基本用法
new Promise((resolve, reject) => { setTimeout(() => { resolve('函数执行了') }, 2000) }).then(value => { console.log(value) }) 复制代码
3. 并行执行promise
promise中有两个方法,分别为promise.all 以及 promise.race;
promise.all 是等所有任务都完成之后才会之后的then方法 promise.race则是在其中一个任务完成之后就会执行then方法
const promise1 = new Promise(resolve => { setTimeout(() => { resolve('promise1执行了') }, 2000) }) const promise2 = new Promise(resolve => { setTimeout(() => { resolve('promise2执行了') }, 5000) }) Promise.all([promise1, promise2]).then(values => { console.log(values) }) Promise.race([promise1, promise2]).then(values => { console.log(values) }) 复制代码
控制台打印结果如下
promise1执行了 ['promise1执行了', 'promise2执行了'] 复制代码
第一个promise1执行了是在2秒后,Promise.race().then执行之后输出的,第二个数组是Promise.all().then执行之后输出的。
promise.then的链式调用
promise.then可以进行链式调用,then接受的值就是上一个then方法的返回值
new Promise(resolve => { resolve(100) }).then((value) => { console.log(value) return value }).then().then((value) => { console.log(value) }).then(() => {}).then((value) => { console.log(value) }) 复制代码
上述代码输出结果为100 100 undefined
当then函数里面没有参数时,即then() 会默认转化为then(value => value),所以第二个100会输出出来, 最后一个undefined是由于上一个then没有返回值,所以会输出undefined.
作者:真不想写代码
链接:https://juejin.cn/post/7024447980002344996