Promise

2020-03-22 本文已影响0人 Lyan_2ab3

为什么需要引入 Promise

我们都知道web 单线程有很多异步回调，这短短的一段代码里面竟然出现了五次回调，这么多的回调会导致代码的逻辑不连贯、不线性，非常不符合人的直觉，这就是异步回调影响到我们的编码方式。


//执行状态
function onResolve(response){console.log(response) }
function onReject(error){console.log(error) }

let xhr = new XMLHttpRequest()
xhr.ontimeout = function(e) { onReject(e)}
xhr.onerror = function(e) { onReject(e) }
xhr.onreadystatechange = function () { onResolve(xhr.response) }

//设置请求类型，请求URL，是否同步信息
let URL = 'https://time.geekbang.com'
xhr.open('Get', URL, true);

//设置参数
xhr.timeout = 3000 //设置xhr请求的超时时间
xhr.responseType = "text" //设置响应返回的数据格式
xhr.setRequestHeader("X_TEST","time.geekbang")

//发出请求
xhr.send();

那么怎么才能变的更加的线性，我们开始封装异步回调，只在乎输入和输出的结果。

引入promise 是如何解决消灭嵌套调用和多次错误处理？
Promise 如何实现了回调函数的延时绑定？
如何将回调函数 onResolve 的返回值穿透到最外层，摆脱嵌套循环的？
Promise 出错后，是怎么通过“冒泡”传递给最后那个捕获异常的函数？
Promise 中为什么要引入微任务？

promise

1、对象的状态不受外界影响。Promise对象代表一个异步操作，有三种状态：pending（进行中）、fulfilled（已成功）和rejected（已失败）
2、一旦状态改变，就不会再变，任何时候都可以得到这个结果。Promise对象的状态改变，只有两种可能：从pending变为fulfilled和从pending变为rejected。

const promise = new Promise(function(resolve, reject) {
  // ... some code

  if (/* 异步操作成功 */){
    resolve(value);
  } else {
    reject(error);
  }
});

Promise实例生成以后，可以用then方法分别指定resolved状态和rejected状态的回调函数。
resolved 函数是，promise 对象从pending 变为 resolved，在异步操作成功时调用，并将异步操作的结果，作为参数传递出去。
rejected 函数是，promise 对象从pending 变为 rejected，在异步操作失败时调用，并将异步操作报出的错误，作为参数传递出去。
Promise实例生成以后，可以用then方法分别指定resolved状态和rejected状态的回调函数。

promise.then(function(value) {
  // success
}, function(error) {
  // failure
});

第一个回调函数是Promise对象的状态变为resolved时调用，
第二个回调函数是Promise对象的状态变为rejected时调用。
其中，第二个函数是可选的，不一定要提供。

let promise = new Promise(function(resolve, reject) {
  console.log('Promise');
  resolve();
});

promise.then(function() {
  console.log('resolved.');
});

console.log('Hi!');

// Promise
// Hi!
// resolved
// promise 是立即执行的，promise状态进入resolve 状态，
//则直接将回调放入微任务队列中，执行then 方法是同步的，
//但是then 中的回调是异步的

new Promise((resolve, reject) => {
  resolve(1);
  console.log(2);
}).then(r => {
  console.log(r);
});
// 2
// 1
// 调用resolve或reject并不会终结 Promise 的参数函数的执行。
//调用resolve(1)以后，后面的console.log(2)还是会执行，并且会首先打印出来。

Promise.prototype.then()

Promise 实例具有then方法，也就是说，then方法是定义在原型对象。

then方法的第一个参数是resolved状态的回调函数，
第二个参数（可选）是rejected状态的回调函数。
then方法返回的是一个新的Promise实例（注意，不是原来那个Promise实例）

Promise.prototype.catch()

Promise.prototype.catch方法是.then(null, rejection)或.then(undefined, rejection)的别名，用于指定发生错误时的回调函数。

const promise = new Promise(function(resolve, reject) {
  throw new Error('test');
});
promise.catch(function(error) {
  console.log(error);
});
// Error: test

Promise 对象的错误具有“冒泡”性质，会一直向后传递，直到被捕获为止。也就是说，错误总是会被下一个catch语句捕获。

catch 返回的仍然是一个promise，后面还可以调用then ，如果catch 中间不抛出错误，就直接跳过。

Promise.prototype.finally()

不管promise最后的状态，在执行完then或catch指定的回调函数以后，都会执行finally方法指定的回调函数

finally方法的回调函数不接受任何参数，这意味着没有办法知道，前面的 Promise 状态到底是fulfilled还是rejected。这表明，finally方法里面的操作，应该是与状态无关的，不依赖于 Promise 的执行结果。

Promise.all()

Promise.all()方法用于将多个 Promise 实例，包装成一个新的 Promise 实例。

const p = Promise.all([p1, p2, p3]);

只有p1、p2、p3的状态都变成fulfilled，p的状态才会变成fulfilled，此时p1、p2、p3的返回值组成一个数组，传递给p的回调函数。
只要p1、p2、p3之中有一个被rejected，p的状态就变成rejected，此时第一个被reject的实例的返回值，会传递给p的回调函数。

实现一个promise.all
有时候面试会遇到这样的问题

首先我们要知道 promise.all 返回的是一个promise 实例
如果传入的参数中的 promise 都变成完成状态，Promise.all 返回的 promise 异步地变为完成。
如果传入的参数中，有一个 promise 失败，Promise.all 异步地将失败的那个结果给失败状态的回调函数，而不管其它 promise 是否完成
在任何情况下，Promise.all 返回的 promise 的完成状态的结果都是一个数组

  Promise.all = function (promises){
        return new Promise((resolve,reject) => {
          // 将迭代对象转化为数组
          promises = Array.from(promises)
          if(promises.length === 0){
            resolve([]) 
          }else{
            let result = [];
            let index = 0;
            for( let i = 0; i < promises.length; i++){
              Promise.resolve(promises[i]).then(data=>{
                result[i] = data;
                if(++index === promises.length){
                  resolve(result)
                }
              },err =>{
                reject(err)
                return          
                })
            }
          }
        })
      }

// 封装 Promise.all方法
Promise.all = function (values) {
    return new Promise((resolve, reject) => {
        let result = []; // 存放返回值
        let counter = 0; // 计数器，用于判断异步完成
        function processData(key, value) {
            result[key] = value;
            // 每成功一次计数器就会加1，直到所有都成功的时候会与values长度一致，则认定为都成功了，所以能避免异步问题
            if (++counter === values.length) {
                resolve(result);
            }
        }
        // 遍历 数组中的每一项，判断传入的是否是promise
        for (let i = 0; i < values.length; i++) {
            let current = values[i];
            // 如果是promise则调用获取data值，然后再处理data
            if (isPromise(current)) {
                current.then(data => {
                    processData(i, data);
                }, reject);
            } else {
                // 如果不是promise，传入的是普通值，则直接返回
                processData(i, current);
            }
        }
    });
}

promise 核心原理解析：

Promise函数参数可以作为输入信息，而后经过Promise的内部处理

// 实例化 Promise
new Promise((resolve, reject)=> {
    // 输入
    AjaxRequest.post({
        url: 'url',
        data: {},
        sueccess: ()=> {
            // resolve
            resolve(res)
        },
        fail: (err)=> {
            // reject
            reject(err)
        }
    })
}).then((res)=> {
    // res 输出
    // ...操作
}).catch((err)=> {
    // err 输出
    // ...操作
})

内部进行了哪些操作呢？

pending状态下会运行的函数

1、实例化构造函数

// 首先运行，Promise构造函数
function Promise(fn) {
    if (typeof this !== 'object') {
    throw new TypeError('Promises must be constructed via new');
  }
  if (typeof fn !== 'function') {
    throw new TypeError('Promise constructor\'s argument is not a function');
  }
    // _deferreds的类型，1是 single，2是 array
    this._deferredState = 0;
    // 0 - pending
    // 1 - fulfilled(resolved)
    // 2 - rejected
    // 3 - 另一个Promise的状态
    this._state = 0;
    // promise 执行结果
    this._value = null;
    // then注册回调数组
    this._deferreds = null;
    // fn等于noop 即return
    if (fn === noop) return;
    // 接受Promise回调函数 和 this 作为参数
    doResolve(fn, this);
}

Promise构造函数，会初始化属性，fn就是我们传入的函数。
doResolve(fn, this);，this指向它自己，负责执行fn函数。
等下面的then函数和catch函数的回调函数注册完之后，doResolve函数将立即执行

2、then 方法注册回调函数

Promise.prototype.then = function(onFulfilled, onRejected) {
    if (this.constructor !== Promise) {
        // safeThen函数也是通过调用handle函数，return 新的Promise对象
        return safeThen(this, onFulfilled, onRejected);
    }
    // 生成新的Promise对象
    var res = new Promise(noop);
    handle(this, new Handler(onFulfilled, onRejected, res));
    return res;
};

function safeThen(self, onFulfilled, onRejected) {
  return new self.constructor(function (resolve, reject) {
    var res = new Promise(noop);
    res.then(resolve, reject);
    handle(self, new Handler(onFulfilled, onRejected, res));
  });
}


// Handler构造函数
// 它的作用是挂载 then中的回调函数 和 一个空的Promise对象
function Handler(onFulfilled, onRejected, promise){
    // then中的Fulfilled回调函数
    this.onFulfilled = typeof onFulfilled === 'function' ? onFulfilled : null;
    // then中的Rejected回调函数
    this.onRejected = typeof onRejected === 'function' ? onRejected : null;
    // 保存新的Promise
    this.promise = promise;
}

// 保存then注册回调函数，更新回调函数状态
function handle(self, deferred) {
      while (self._state === 3) {
       self = self._value;
     }
    if (Promise._onHandle) {
      Promise._onHandle(self);
    }

    // pedding 状态 
    if (self._state === 0) {
        // deferred == new Handler(onFulfilled, onRejected, res)
        if (self._deferredState === 0) {
            self._deferredState = 1;
            // 存储then回调deferred对象
            self._deferreds = deferred;
            return;
        }
        if (self._deferredState === 1) {
            self._deferredState = 2;
            // 存储then回调deferred对象
            self._deferreds = [self._deferreds, deferred];
            return;
        }
        // 存储then回调函数对象
        self._deferreds.push(deferred);
        return;
    }

    // 只有当进入到非pedding状态，handleResolved才会运行
    handleResolved(self, deferred);
}

Handler函数生成一个deffer对象，用于保存then函数中的onFulfilled和onRejected回调.以及返回的新的promise实例。
then方法中的核心函数就是handle函数，它负责接收this和new Handler对象。
若在pedding状态下，handle函数只负责注册回调函数，更新回调函数状态。在非pedding状态下，则会执行handleResolved函数。

3、 catch方法注册回调函数

Promise.prototype['catch'] = function (onRejected) {
  return this.then(null, onRejected);
};
// catch方法的回调函数实际是通过then方法来完成保存的。

4、调用doResolve函数执行fn

// 调用doResolve函数
function doResolve(fn, promise) {
    var done = false;
    
    // tryCallTwo函数执行 类似于
    // (resolve, reject) => {if(err){reject(err);return};resolve(res)}执行;
    var res = tryCallTwo(fn, function (value) {
        if (done) return;
        done = true;
        resolve(promise, value);
    }, function (reason) {
        if (done) return;
        done = true;
        reject(promise, reason);
    });

    // fn函数调用失败，手动运行reject函数
    if (!done && res === IS_ERROR) {
        done = true;
        reject(promise, LAST_ERROR);
    }
}

doResolve是同步直接调用传入的函数。
其中tryCallTwo函数作用是调用函数fn，它接受三个参数。先执行fn函数，根据结果，再执行resolve函数或reject函数。
在resolve函数或reject函数被调用之前，Promise对象的状态依然是pending。

promise.png

进入resolve或reject状态时会运行的函数:

调用resolve
调用finale
调用handleResolved函数

调用resolve

若Promise对象的fn函数执行正常，之后就会调用resolve函数


function resolve(self, newValue) {
    // 。。。省略
    
    // newValue存在 & (newValue是一个对象 || newValue是一个函数)
    if (
        newValue &&
        (typeof newValue === 'object' || typeof newValue === 'function')
    ) {
        // 获取then函数
        var then = getThen(newValue);
        // 。。。省略

        if (
            then === self.then &&
            newValue instanceof Promise
        ) {
            // 如果newValue 是一个Promise对象，那么调用finale函数
            self._state = 3;
            self._value = newValue;
            finale(self);
            return;
        } else if (typeof then === 'function') {
            // 如果newValue 是一个函数，就继续调用doResolve函数
            doResolve(then.bind(newValue), self);
            return;
        }
    }
    // 标记完成，进入结束流程
    self._state = 1;
    self._value = newValue;
    finale(self);
}

确认newValue的值，如果newValue是一个函数，就继续循环调用doResolve函数；
如果newValue 是一个Promise对象，那么就直接调用finale函数。
都不是，则直接调用finale函数。

调用finale函数

function finale(self) {
    // 单个回调
    if (self._deferredState === 1) {
        // 执行handle函数，实际是执行handleResolved
        handle(self, self._deferreds);
        self._deferreds = null;
    }
    // 回调数组
    if (self._deferredState === 2) {
        for (var i = 0; i < self._deferreds.length; i++) {
            // 执行handle函数，实际是执行handleResolved
            handle(self, self._deferreds[i]);
        }
        self._deferreds = null;
    }
}

finale函数表示进入结束流程，执行handle函数。
同时在上面已经说到，在非pedding状态下，执行handle函数，实际会是执行handleResolved函数。

调用handleResolved函数

var asap = require('asap/raw');

function handleResolved(self, deferred) {
    asap(function() {
        var cb = self._state === 1 ? deferred.onFulfilled : deferred.onRejected;
        // 不存在 onFulfilled & onRejected
        // deferred.promise 只是一个空的Promise对象
        if (cb === null) {
            // 1 - fulfilled(resolved)
            if (self._state === 1) {
                resolve(deferred.promise, self._value);
            } else {
                reject(deferred.promise, self._value);
            }
            return;
        }
        // 执行cb回调函数
        var ret = tryCallOne(cb, self._value);
        if (ret === IS_ERROR) {
            // 错误，报reject
            reject(deferred.promise, LAST_ERROR);
        } else {
            resolve(deferred.promise, ret);
        }
    });
}

通过异步asap调用，若不存在onFulfilled和onRejected，直接调用resolve或reject。若存在，则tryCallOne回调的结果，直接调用resolve或reject。

WechatIMG549.png

Promise 的注册和执行过程

第一道题

new Promise((resolve, reject) => {
  console.log("外部promise");
  resolve();
})
  .then(() => {
    console.log("外部第一个then");
    return new Promise((resolve, reject) => {
      console.log("内部promise");
      resolve();
    })
    .then(() => {
    console.log("内部第一个then");
    })
    .then(() => {
    console.log("内部第二个then");
    });
  })
  .then(() => {
    console.log("外部第二个then");
  });

//  当执行 then 方法时，如果前面的 promise 已经是 resolved 状态，
// 则直接将回调放入微任务队列中

output:
外部promise
外部第一个then
内部promise
内部第一个then
内部第二个then
外部第二个then

外部第一个 new Promise 执行，执行完 resolve ,所以立即将回调放入微任务队列。所以此时外部第一个then 放入微任务
外部第一个 then 方法里面 return 一个 Promise，这个 return ，代表外部的第二个 then 的执行需要等待 return 之后的结果
当然会先执行完内部两个 then 之后，再执行外部的第二个 then

如果前面的 promise 已经是 resolved 状态，则会立即将回调推入微任务队列（但是执行回调还是要等到所有同步任务都结束后）

如果 then 中的回调返回了一个 promise，那么 then 返回的 promise 会等待这个 promise 被 resolve 后再 resolve

第二道题

new Promise((resolve, reject) => {
  console.log("外部promise");
  resolve();
})
  .then(() => {
    console.log("外部第一个then");
    new Promise((resolve, reject) => {
      console.log("内部promise");
      resolve();
    })
      .then(() => {
        console.log("内部第一个then");
      })
      .then(() => {
        console.log("内部第二个then");
      });
  })
  .then(() => {
    console.log("外部第二个then");
  });

// 比上面的代码少一个return

output:
外部promise
外部第一个then
内部promise
内部第一个then
外部第二个then
内部第二个then

new Promise((resolve, reject) => {
  console.log("外部promise");
  resolve();
})
  .then(() => {
    console.log("外部第一个then");
    new Promise((resolve, reject) => {
      console.log("内部promise");
      resolve();
    })
      .then(() => {
        console.log("内部第一个then");
      })
      .then(() => {
        console.log("内部第二个then");
      }) .then(() => {
        console.log("内部第3个then");
      })
  })
  .then(() => {
    console.log("外部第二个then");
  })
 .then(() => {
    console.log("外部第3个then");
  })

外部promise
外部第一个then
内部promise
内部第一个then
外部第二个then
内部第二个then
外部第3个then
内部第3个then

事件执行机制：先注册后执行

*1、当new Promise 执行碰到resolve 状态确定之后，开始第一个then 的微任务注册。

2、外1then 的回调还没有执行，是pending 状态。所以外2then 的回调也不会被推入微任务队列也不会执行。（外部的第二个 then 的注册，需要等待外部的第一个 then 的同步代码执行完成）
3、在实例化时执行函数，打印 log: 内部promise，然后执行 resolve 函数，接着执行到内部的第一个 then（内1then），由于前面的 promise 已被 resolve，所以将回调放入微任务队列中。
4、内1then 返回的 promise 是 pending 状态时，内2then和外2 then 不注册不执行。
5、外部1then 执行完，外1then 返回的 promise 的状态由 pending 变为 resolved。同时遍历之前通过 then 给这个 promise 注册的所有回调，将它们的回调放入微任务队列中，也就是外2then 的回调

外部的第一个 then 的同步操作已经完成了，然后开始注册外部的第二个 then，此时外部的同步任务也都完成了。
同步操作完成之后，那么开始执行微任务：
内部的第一个 then 是优先于外部的第二个 then 的注册，所以会执行完内部的第一个 then 之后；
然后注册内部的第二个 then ;
然后执行外部的第二个 then ；
,然后再执行内部的第二个 then。

第三道

如果调用resolve函数和reject函数时带有参数, 参数会被传递给回调函数，resolve函数的参数除了正常的值以外，还可能是另一个 Promise 实例

const p1 = new Promise(function (resolve, reject) {
  // ...
});

const p2 = new Promise(function (resolve, reject) {
  // ...
  resolve(p1);
})

这时p1的状态就会传递给p2，也就是说，p1的状态决定了p2的状态。如果p1的状态已经是resolved或者rejected，那么p2的回调函数将会立刻执行。

const p111 = new Promise(function (resolve, reject) {
  // ...
resolve()
}).then(()=>{
console.log('p1 then')
return 11
});

const p12 = new Promise(function (resolve, reject) {
  // ...
  resolve(p111);
}).then((p3)=>{
console.log('p2 then',p111,p3)
})

// p1 then   > p2 then Promise {<resolved>: 11} 11

改写函数成promise 形式:

var fs = require("fs");
 
function myReadFile(){
    return new Promise(function(resolve,reject){
        fs.readFile("./index.html",function(err,data){
            if (!err) {
                resolve(data);
            }else{
                reject(err);
            }
        });
    });
}
 
myReadFile().then(function(d){
    console.log(d.toString());
}).catch();

红灯3秒亮一次，绿灯1秒亮一次，黄灯2秒亮一次；如何让三个灯不断交替重复亮灯？（用Promise实现）三个亮灯函数已经存在：

function red() {
    console.log('red');
}
function green() {
    console.log('green');
}
function yellow() {
    console.log('yellow');
}

红灯3秒亮一次，绿灯1秒亮一次，黄灯2秒亮一次，意思就是3秒执行一次red函数，2秒执行一次green函数，1秒执行一次yellow函数，不断交替重复亮灯，意思就是按照这个顺序一直执行这3个函数，这步可以利用递归来实现。

function red() {
    console.log('red');
}
function green() {
    console.log('green');
}
function yellow() {
    console.log('yellow');
}

var light = function (timmer, cb) {
    return new Promise(function (resolve, reject) {
        setTimeout(function () {
            cb();
            resolve();
        }, timmer);
    });
};

var step = function () {
    Promise.resolve().then(function () {
        return light(3000, red);
    }).then(function () {
        return light(2000, green);
    }).then(function () {
        return light(1000, yellow);
    }).then(function () {
        step();
    });
}

step();

https://es6.ruanyifeng.com/#docs/promise

https://www.jianshu.com/p/4bb1521343ba