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

Posted 2021-06-02 仙贝wang

首先介绍两个属于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