《Promise学习笔记》- 2Promise相关常用方法总结

首先介绍两个属于Promise函数对象的两个方法,在函数内部使用。

Promise.resolve()

语法:Promise.resolve(value);

注意,这里的参数value可以是一个Promise类型的对象,也可以是一个非Promise类型的对象;并且能够返回一个成功或失败的Promise对象。

第一种情况,value是Promise类型的对象。此时所返回的Promise对象的状态由所接受参数value的状态所决定,也就是在下面代码中,如果value的状态为失败则p也是失败的,反之如果value成功则p也成功;p成功或失败的状态值就是value成功或失败的值!

const value = new Promise((resolve,reject)=>{
    resolve(11);
})
const p = Promise.resolve(value);        // 状态为resolved

const value = new Promise((resolve,reject)=>{
    reject(22);
})
const p = Promise.resolve(value);        // 状态为rejected

其次如果是非Promise类型的对象,这里可以是数字、字符串或者undefined等等类型,甚至可以为空。那么此时所返回的Promise对象一定为成功的状态,并且传入的value值就是成功的状态值。

const p = Promise.resolve(undefined);   // 状态为fulfilled,并且成功状态值为undefined

Promise.reject()

语法:Promise.reject(value);

注意,这里的参数value可以是一个Promise类型的对象,也可以是一个非Promise类型的对象;需要强调的是所返回的Promise对象的状态始终是失败的,传入的value值就是失败的状态值!

const value = new Promise((resolve,reject)=>{
    resolve(11);
})
const p = Promise.resolve(value);        // 状态为rejected

const value = new Promise((resolve,reject)=>{
    reject(22);
})
const p = Promise.resolve(value);        // 状态为rejected
const p = Promise.reject(undefined);     // 状态为rejected,并且失败状态值为undefined

其次是两个属于Promise实例对象的方法,可以供实例对象p使用。

Promise.prototype.then()

语法:p.then(value => {...},reason => {...})

其最多接收两个参数,分别是成功或失败状态的回调函数。当p的状态变为成功或失败时,则调用相应的回调函数。

const p = new Promise((resolve,reject)=>{
    resolve(111);
});

假设实例对象p的状态为成功(失败的情况大家可以自己测试一下),并且成功的值为111,那么一定会执行第一个参数指定的回调函数(这里为了代码简介没有指定失败状态的回调函数)。

具体的返回值返回规则如下:

  • 没有返回值。那么then返回成功状态的Promise ,并且成功的状态值是undefined。

    const res = p.then(value => {
        console.log(value);
    })
    console.log(res);
    
  • 有返回值。那么then返回成功状态的Promise,并且成功的状态值就是该返回值。

    const res = p.then(value => {
        return 222;
    })
    console.log(res);
    
  • 抛出异常。那么then返回失败状态的Promise,并且失败的状态值是抛出的异常值。

    const res = p.then(value => {
        throw '333';
    })
    console.log(res);
    
  • 返回一个成功状态的Promise。那么then返回成功状态的Promise,并且成功的状态值就是返回Promise值决定!

    const res = p.then(value => {
        return Promise.resolve(444);
    })
    console.log(res);
    
  • 返回一个失败状态的Promise。那么then返回失败状态的Promise,并且失败的状态值就是返回Promise值决定!

    const res = p.then(value => {
        return Promise.reject(555);
    })
    console.log(res);
    
  • 返回一个pending状态的Promise。那么then返回的也是一个pending状态的Promise,并且该Promise终态与所返回的Promise终态保持一致。

Promise.prototype.catch()

语法:p.then(reason => {...})

相当于p.then(undefined,reason => {...})的语法糖。

如果回调函数中抛出错误或者返回一个失败状态的Promise,则catch返回的Promise也是失败状态的;否则则是成功状态。

最后是两个常用的函数对象方法。

Promise.all()

语法:Promise.all(.....)

接收的参数是一个可迭代对象,例如一个数组,并且数组中每个元素都是一个Promise实例对象。其返回值是一个新的Promise对象,如果数组中所有Promise都是成功状态,那么所返回的新的Promise也是成功状态,并且成功的状态值是是一个新的数组,该数组中每个元素是对应的数组中每个Promise对象成功的状态值!组要注意的是:主要传入数组中存在失败状态的Promise,那么所返回的新的Promise对象也是一个失败的状态,并且失败的状态值是数组中第一个变为失败状态的Promise的状态值!(注意这里有可能存在异步Promise)

  • 全部成功
const p1 = new Promise((resolve,reject)=>{
    setInterval(()=>{
        resolve(111);
    },1000)
})
const p2 = new Promise((resolve,reject)=>{
    resolve(222);
})
const p3 = Promise.resolve(333);
const res = Promise.all([p1,p2,p3]);
console.log(res);       // 状态为成功,并且成功的状态值是[111,222,333]
  • 存在失败的Promise
const p1 = new Promise((resolve,reject)=>{
    setInterval(()=>{
        reject(111);
    },1000)
})
const p2 = new Promise((resolve,reject)=>{
    resolve(222);
})
const p3 = Promise.resolve(333);
const res = Promise.all([p1,p2,p3]);
console.log(res);         // 状态为失败,并且失败的状态值是111
  • 调用定时器生成失败的Promise
const p1 = new Promise((resolve,reject)=>{
    setInterval(()=>{
        reject(111);
    },1000)
})
const p2 = new Promise((resolve,reject)=>{
    reject(222);
})
const p3 = Promise.resolve(333);
const res = Promise.all([p1,p2,p3]);
console.log(res);           // 状态为失败,失败的状态值是222

Promise.race()

语法:Promise.race(.....)

接收的参数是一个可迭代对象,例如一个数组,并且数组中每个元素都是一个Promise实例对象。返回值由第一个完成的Promise决定,而不是有第一个被调用的Promise所决定。如果数组中最先完成Promise状态为成功,那么该方法所返回的Promise状态也是成功,否则则失败。

  • 全部是同步Promise
const p1 = new Promise((resolve,reject)=>{
    resolve(111);
})
const p2 = new Promise((resolve,reject)=>{
    resolve(222);
})
const p3 = Promise.resolve(333);
const res = Promise.race([p1,p2,p3]);
console.log(res);            // 状态为成功,状态值为111
  • 存在异步Promise
const p1 = new Promise((resolve,reject)=>{
    setInterval(()=>{
        resolve(111);
    },1000)
})
const p2 = new Promise((resolve,reject)=>{
    resolve(222);
})
const p3 = Promise.resolve(333);
const res = Promise.race([p1,p2,p3]);
console.log(res);            // 状态为成功,状态值为222

这里主要介绍了六种常用的方法,更多详细的方法可以参考MDN文档:https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Promise

上一篇:promise关键问题


下一篇:React中如何在componentWillUnmount中取消之前的Promise异步请求?