让你简单易懂的Promise

68 阅读2分钟

前言

记录一次 Promise 的学习总结,希望对看到这篇文章的人有所帮助。

什么是 Promise ?

Promise 是异步编程的一种解决方案,解决了传统异步操作,回调函数和事件带来的回调地狱(函数嵌套)的问题。Promise 是一个容器,里面保存着一个异步操作的结果。语法上 Promise 是一个对象,利用自身的API,获取异步操作的消息。

优点:

1.对象的状态不受外界的影响。它有三种状态 Pending(进行中),Fulfilled(已成功),Rejected(已失败)只有等操作结束才可以决定当前是哪一种状态。

2.一旦状态改变就不会在变,任何时候都可以得到这个结果。Promise的状态只有两种可能,Pending->Fulfilled ||Pending->Rejected,只要这两种情况发生,状态就凝固了,不会再变,而是一直保持着执行后的结果。

缺点: 一旦开始执行Promise,状态为Pending,无法取消,直至执行结束,中途无法知道发展到哪一步。

Var Promise = new Promise((resolve,reject)=>{
      if(异步操作){
            resolve('ok')
         }else{
            reject('no')
       }
})

Promise Api (常用)

then (): 当promise的状态从 pending 改成 fulfilled 则执行then函数,接受两个回调函数参数, 第一个回调表示已成功时调用。第二个回调表示已失败时调用 。
catch (): 当promise的状态从 pending 改成 Rejected 调用catch函数,是then(null,rejection)的别名。
all (): 接受一个 由promise对象组成的数组,Promise.all([Promise1,Promise2,Promise3])
race(): 接受一个参数 是由promise对象组成的数组 返回数组里面最先出结果的那个对象的结果 (不管对错)
finally():不管成功还是失败都会执行该方法。

实现Promise.all()方法

/**
     * Promise.all()方法接受一个由promise实例组成的数组,返回一个新的promise实例
     * 数组中所有的promise实例都成功时(由pending 转为 fulfilled时)Promise.all 才成功,
     * 这些promise实例所有的resolve结果会按照传入时的顺序放入一个数组中,作为Promise.all()resolve(arr)的结果
     * 数组中有一个实例失败  promise.all()就失败,Promise.all()的.catch()会捕捉这个reject
     */
    Promise.myAll = function (promises) {
      let arr = [];
      count = 0;
      return new Promise((resolve, reject) => {
        promises.forEach((item, i) => {
          //遍历传进来的promise集合
          Promise.resolve(item)
            .then((item) => {
              //通过resolve方法筛选出传进来的集合里面是否都是成功状态
              arr[i] = item;
              count += 1;
              if (count === promises.length) resolve(arr);
            })
            .catch(reject);
        });
      });
    };

    const p1 = new Promise((resolve, reject) => {
      setTimeout(() => {
        resolve("p1 延迟1秒");
      }, 1000);
    });

    const p2 = Promise.resolve("p2");

    const p3 = new Promise((resolve, reject) => {
      setTimeout(() => {
        resolve("p3 延时3秒");
      }, 2000);
    });

    Promise.myAll([p1, p2, p3])
      .then((res) => console.log(res))
      .catch((rej) => console.log(rej));

总结

一句话概括: Promise是一种接异步编程的解决方案,它的出现主要解决了回调地狱,函数嵌套层级太深的问题,它有三种状态,常用的五个Api。

欢迎评论留言探讨,一起探讨,一起进步!