本文主要了解Promise基本原理,为了更好地了解其原理,我们会从零开始构建一个简单的Promise函数,并对异步编程概念重新阐述一遍

    异步编程

    众所周知javascript是一门单线程的脚本语言,代码都是从上自下执行的,如果碰到大量的数据处理或者耗时较长的任务阻塞进程的话,会大大降低代码的工作效率和实用性,所以异步编程就应运而生了

    目前已知的几种异步编程方案:

    • 回调函数
    • Promise函数
    • Generator函数
    • Async函数

    回调函数

    由调用者定义,交给执行者去执行的函数,例如发送fetch请求之后处理返回的数据,缺点是不利于阅读和造成大量的回调函数嵌套导致我们常见的回调地狱的问题

    Promise函数

    Promise实际上就是一个对象,用来表示一个异步任务的执行结果是成功还是失败,在内部保存了一个状态,初始值为pending(等待执行),当执行者调用Promise之后可以改为fulfiilled(成功)或者是rejected(失败状态),且状态一经修改不可逆转

    Promise的基本用法
    实例化Promise的时候需要传入一个回调函数(resolve,reject)=>{},这个函数返回2个参数,Priomise的原型方法:resolve,reject

    1. let promise =  new Promise((resolve,reject)=>{
    2.          resolve("成功!")
    3.        //reject("失败!")
    4. })

    resolve方法
    resolve方法用于将promise对象的状态修改为fulfilled(成功),一般可以将异步任务的操作结果通过result参数传递出去.代码如下所示:

    1. //执行成功
    2. resolve = (value) => {
    3.     // 判断当前的状态是否为等待,不是则返回
    4.     if (this.status != PENDING) throw Error("状态已改变,不可以重复提交!");
    5.     // 将状态变为成功
    6.     this.status = FULFILLED;
    7.     // 保存传入的参数
    8.     this.value = value;
    9.     // 判断成功回调是否存在,有则调用
    10.     while (this.succeesCallback.length > 0) this.succeesCallback.shift()(this.value)
    11. }

    reject方法
    resolve方法用于将promise对象的状态修改为rejected(失败),一般用来返回失败原因.代码如下所示

    1.     //执行失败
    2.     reject = (reason) => {
    3.         // 判断当前的状态是否为等待,不是则返回
    4.         if (this.status != PENDING) throw Error("状态已改变,不可以重复提交!");
    5.         // 将状态变为失败
    6.         this.status = REJECTED;
    7.         // 保存失败的原因
    8.         this.reason = reason;
    9.         // 判断成功回调是否存在,有则调用
    10.         while (this.failCallback.length > 0) this.failCallback.shift()(this.reason)
    11.     }

    Promise的then的链式调用
    then链式调用主要是解决普通异步方案中的嵌套回调函数导致的回调地狱问题,使回调函数扁平化,便于阅读和提高代码的可靠性

    then方法
    then方法主要用于添加promise对象状态明确后的回调函数:

    • succeesCallback:状态成功以后执行的回调函数,返回参数为异步操作resolve方法的执行结果
    • failCallback:状态失败的回调,返回参数,返回参数为reject的失败原因
    • 内部可以return一个promise对象,将promise对象的异步操作结果返回给下一个then方法