Promise详解

215 阅读1分钟

在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.