关于Promise

127 阅读2分钟

「这是我参与11月更文挑战的第15天,活动详情查看:2021最后一次更文挑战」。

Promise的重要性

Promise的主要作用就是解决异步问题,在此之前,解决异步的方案是利用回调函数,但这种方案就会带来回调地狱的问题,而且代码也很冗长,想想都头大。现在好了,利用Promise解决异步问题,麻麻再也不用担心我写一坨看也看不懂的代码了。。

Promise的状态

一个Promise对象有三种状态:

1、pending(待定):初始状态

2、fulfilled(兑现): 操作成功状态

3、rejected(拒绝):操作失败状态

虽然有三种状态,但是他只有两种状态改变的方式:

1、从pending -> 到fulfilled

2、从pending -> 到rejected

一旦状态改变,就会一直保持这个状态,不会再发生变化了。 Promise一旦被新建,就会立即执行,无法取消。

    //构建Promise
    let p1 = new Promise((resolve, reject) => {
      if(/*成功*/){
        resolve(data); 
      }else{
        //失败
        reject(reason)
      }
    })

通过new来构建一个PromisePromise接受一个立即执行函数作为参数,该函数有两个参数函数:resolvereject

resolve函数的作用:在异步操作成功时调用,并将异步操作的结果,作为参数传递出去; reject函数的作用:在异步操作失败时调用,并将异步操作报出的错误,作为参数传递出去。

Promise实例生成以后,可以通过then方法指定resolved状态和reject状态的回调函数。

then方法接收两个回调函数作为参数:

  1. promise状态变为resolved时调用 (必选)
  2. promise状态变为rejected时调用 (可选)
p1.then(function(data) {
  //成功操作,处理结果
  console.log(data);
}, function(reason) {
  //失败操作
  console.log(reason);
});

手写代码实现一个Promise.all方法?

    let p1 = new Promise((resolve, reject) => {
      setTimeout(() => {
        resolve(111);
      }, 1000);
    })
    let p2 = new Promise((resolve, reject) => {
      setTimeout(() => {
        resolve(2222);
      }, 2000);
    })

    // Promise.all([p1, p2]).then(res => {
    //   console.log(res);
    // })

    function myPromiseAll(lists){
      return new Promise((resolve, reject)=> {
        let resArr = [];
        let num = 0;
        lists.forEach(item => {
          item.then(res => {
            resArr.push(res) //将lists里面的成功执行结果push进结果数组里
            num++; //达到lists.length时,改变promise状态
            if(num === lists.length){
              resolve(resArr)
            }
          })
        });
      })
    }
    myPromiseAll([p1, p2]).then(res => {
      console.log(res) 
    })

ok,文章到此结束啦~