Promise常用方法详解

185 阅读2分钟

Promise

Promise是一个内置的构造函数,new出Promise对象,要传入一个回调函数,这个是同步的回调,会立即执行

Promise有3种状态分别是:初始化(pending)成功(fulfilled)失败(rejected)

new Promise出实例对象时立刻为初始化(pending)状态,传入2个回调函数,分别是resolve, reject

调用resolve函数会让Promise实例变为成功状态并可以指定成功状态的值(Value), 反之reject为失败

 const p = new Promise((resolve, reject) => {
   resolve("成功了"); // 指定Promise实例对象状态
   //   reject("失敗了");
 });
 // 接收Promise实例对象对象状态返回的值
 p.then(
   data => {
     console.log(data); // 第一个函数成功
   },
   err => {
     console.log(err); // 第二个函数失败
   }
 );

resolve

Promise.resolve用于快速返回一个成功状态的Promise对象非Promise值一定为成功,但是传入Promise失败的对象一定失败

const p = Promise.reject(-100)
const p1 = Promise.resolve(p) // 传入非Promise错误状态的值一定为正确的
p1.then(
  (value) => console.log('成功了' + value),
  (reason) => console.log('失败了' + reason)
) // 失败了-100

const p2 = Promise.resolve(false) // 传入非Promise错误状态
p2.then(
  (value) => console.log('成功了' + value),
  (reason) => console.log('失败了' + reason)
) // 成功了false

reject

Promise.reject只要调用了reject一定为错误状态

     const p = Promise.resolve(-100);
     const p1 = Promise.reject(p);
     p1.then(
       (value) => console.log('成功了' + value),
       (reason) => console.log('失败了' + reason)
     );

all

传入一个Promise实例的数组,只有当这个数组所有的Promise实例状态为成功时才以数组的形式返回所有Promise实例成功的结果

否则,只要其中一个错误执行顺序返回第一个报错的Promise实例结果

     const p1 = new Promise((resolve, reject) => {
       resolve("a");
     });
     const p2 = Promise.resolve("b");
     const p3 = new Promise((resolve, reject) => {
       resolve("c");
     });
     Promise.all([p1, p2, p3]).then(
       (vlaue) => console.log("成功了", vlaue),
       (reason) => console.log("失败了" + reason)
     ); // 成功了 [ 'a', 'b', 'c' ]

race

传入一个Promise实例的数组, 对结果没有要求,只返回最快执行完的Promise实例执行的结果

     const p1 = new Promise((resolve, reject) => {
       setTimeout(() => resolve("c"), 500)
     });
     const p2 = Promise.resolve("b");
     const p3 = new Promise((resolve, reject) => {
       setTimeout(() => resolve("c"), 2000)
     });
     Promise.race([p1, p2, p3]).then(
       (vlaue) => console.log("成功了", vlaue),
       (reason) => console.log("失败了" + reason)
     ); // 成功了 b

then

es6解决回调地狱的方法

then中成功回调默认会return undefined,除Promise实例下个then的回调状态必为成功,

下个then的成功与失败取决于上个then返回的Promise实例状态,其他数值皆为成功

     ajax("http://jsonplaceholder.typicode.com/posts")
     .then(
       (data) => {
         console.log(data);
         return ajax("http://jsonplaceholder.typicode.com/posts"); // 返回Promise可继续then链式调用
       },
       (reason) => console.log(reason)
     )
     .then(
         (data) => {
             console.log(data);
             return ajax("http://jsonplaceholder.typicode.com/posts");
           },
         (reason) => console.log(reason)
     )