Promise

作者: 世玮 | 来源:发表于2021-05-03 10:09 被阅读0次

PromiseA+规范

[https://promisesaplus.com/]

术语

promise 是⼀个有then⽅法的对象或者是函数，⾏为遵循本规范
thenable 是⼀个有then⽅法的对象或者是函数
value 是promise状态成功时的值，也就是resolve的参数, 包括各种数据类型, 也包括undefined/thenable或者是 promise
reason 是promise状态失败时的值, 也就是reject的参数, 表示拒绝的原因
exception 是⼀个使⽤throw抛出的异常值

规范

状态 promise status

有三个状态，他们之间的关系
1、pending

1.1 初始状态，可以改变
1.2 在resolve和reject前都处于这个状态
1.3 通过resolve --》fulfilled状态
1.4 通过reject --》 rejected状态
2、fulfilled
2.1 最终态，不可变。
2.2 一个promise被resolve之后会变成这个状态
2.3 必须拥有一个value的值
3、rejected
3.1 最终态，不可变。
3.2 一个promise被reject之后会变成这个状态
3.3 必须拥有一个reason的值

总结一下：

pending ==》 resolve(value)==》 fulfilled
pending ==》reject(reason)==》 rejected

then

Promise应该提供⼀个then⽅法, ⽤来访问最终的结果, ⽆论是value还是reason.

promise.then(onFulfilled, onRejected)

参数要求

1.1 onFulfilled 必须是函数类型, 如果不是函数, 应该被忽略.
1.2 onRejected 必须是函数类型, 如果不是函数, 应该被忽略.

onFulfilled 特性

2.1 在promise变成 fulfilled 时，应该调⽤ onFulfilled, 参数是value（onFulfilled的执行时机）
2.2 在promise变成 fulfilled 之前, 不应该被调⽤.
2.3 只能被调⽤⼀次(所以在实现的时候需要⼀个变量来限制执⾏次数)

onRejected 特性

3.1 在promise变成 rejected 时，应该调⽤ onRejected, 参数是reason（onRejected的执行时机）
3.2 在promise变成 rejected 之前, 不应该被调⽤.
3.3 只能被调⽤⼀次(所以在实现的时候需要⼀个变量来限制执⾏次数)

onFulfilled 和 onRejected 应该是微任务（宏任务与微任务）
这⾥⽤queueMicrotask来实现微任务的调⽤.
then⽅法可以被调⽤多次

5.1 promise状态变成 fulfilled 后，所有的 onFulfilled 回调都需要按照then的顺序执⾏, 也就
是按照注册顺序执⾏(所以在实现的时候需要⼀个数组来存放多个onFulfilled的回调)
5.2 promise状态变成 rejected 后，所有的 onRejected 回调都需要按照then的顺序执⾏, 也
就是按照注册顺序执⾏(所以在实现的时候需要⼀个数组来存放多个onRejected的回调)

返回值
then 应该返回⼀个promise

promise2 = promise1.then(onFulfilled, onRejected);

6.1 onFulfilled 或 onRejected 执⾏的结果为x, 调⽤ resolvePromise
6.2 如果 onFulfilled 或者 onRejected 执⾏时抛出异常e, promise2需要被reject
6.3 如果 onFulfilled 不是⼀个函数, promise2 以promise1的value 触发fulfilled
6.4 如果 onRejected 不是⼀个函数, promise2 以promise1的reason 触发rejected

resolvePromise

resolvePromise(promise2, x, resolve, reject)

7.1 如果 promise2 和 x 相等，那么 reject TypeError
7.2 如果 x 是⼀个 promsie
如果x是pending态，那么promise必须要在pending,直到 x 变成 fulfilled or rejected.
如果 x 被 fulfilled, fulfill promise with the same value.
如果 x 被 rejected, reject promise with the same reason.
7.3
- 如果 x 是⼀个 object 或者是⼀个 function
  let then = x.then.
- 如果 x.then 这步出错，那么 reject promise with e as the reason.
- 如果 then 是⼀个函数，then.call(x, resolvePromiseFn, rejectPromiseFn) resolvePromiseFn 的⼊参是 y, 执⾏ resolvePromise(promise2, y, resolve, reject); rejectPromise 的⼊参是 r, reject promise with r.
- 如果 resolvePromise 和 rejectPromise 都调⽤了，那么第⼀个调⽤优先，后⾯的调⽤忽略。
- 如果调⽤then抛出异常e
- 如果 resolvePromise 或 rejectPromise 已经被调⽤，那么忽略,reject promise with e as the reason
- 如果 then 不是⼀个function. fulfill promise with x.

⼀步步实现⼀个Promise;理解其巧妙的内含。

const promise = new Promise(); //代表Promise是一个构造函数或者class

//2、定义三个状态
const PENDING = 'pending';
const FULFILLED = 'fulfilled';
const REJECTED = 'rejected';

//1、定义一个class 
class MyPromise {

    constructor(fn) {
        // 3、定义初始化状态 
        this.status = PENDING;
        this.value = null;
        this.reason = null;

        //5、
        try {
            //立刻执行 同步执行 。并且有异常立马reject抛出去
            fn(this.resolve.bind(this), this.reject.bind(this));
        } catch (e) {
            this.reject(e);
        }
        
        // 多个then的情况
        //let p = new Promise();
        //p.then();
        //p.then();
        this.FULFILLED_CALLBACK_LIST = [];
        this.REJECTED_CALLBACK_LIST = [];
        this._status = PENDING;
    }

    // FULFILLED_CALLBACK_LIST = [];
    // REJECTED_CALLBACK_LIST = [];
    // _status = PENDING;

    //用getter和setter代替常见的面向过程实现
    get status() {
        return this._status;
    }

    set status(newStatus) {
        this._status = newStatus;
        switch (newStatus) {
            case FULFILLED: {
                this.FULFILLED_CALLBACK_LIST.forEach(callback => {
                    callback(this.value);
                });
                break;
            }
            case REJECTED: {
                this.REJECTED_CALLBACK_LIST.forEach(callback => {
                    callback(this.reason);
                });
                break;
            }
        }
    }

    //4、MyPromise.resolve()  //静态方法 与 实例方法 区别 
    static resolve(value) {
        if (this.status === PENDING) {
            this.status = FULFILLED;
            this.value = value;
            // this.FULFILLED_CALLBACK_LIST.forEach(callback => {
            //     callback(this.value);
            // });
        }
    }

    reject(reason) {
        if (this.status === PENDING) {
            this.status = REJECTED;
            this.reason = reason;
            // this.REJECTED_CALLBACK_LIST.forEach(callback => {
            //     callback(this.reason);
            // });
        }
    }

    //6、
    then(onFulfilled, onRejected) {

        //也解决promise的 穿透
        const fulfilledFn = this.isFunction(onFulfilled) ? onFulfilled : (value) => value;
        const rejectedFn = this.isFunction(onRejected) ? onRejected : (reason) => reason;

        //这边真的巧妙，resolvePromise方便了后续的递归调用；解决了Promise的链式调用问题。
        //then操作应该是一个微任务 ；故这个函数的内部实现还需要用queueMicrotask进行包装下
        const fulFilledFnWithCatch = (resolve, reject, newPromise) => {
            try {
                if (!this.isFunction(onFulfilled)) {
                    resolve(this.value);
                } else {
                    const x = fulfilledFn(this.value);
                    this.resolvePromise(newPromise, x, resolve, reject);
                }
            } catch (e) {
                reject(e)
            }
        };

        const rejectedFnWithCatch = (resolve, reject, newPromise) => {
            try {
                if (!this.isFunction(onRejected)) {
                    reject(this.reason);
                } else {
                    const x = rejectedFn(this.reason);
                    this.resolvePromise(newPromise, x, resolve, reject);
                }
            } catch (e) {
                reject(e);
            }
        }

        switch (this.status) {
            case FULFILLED: {
                const newPromise = new MyPromise((resolve, reject) =>
                    fulFilledFnWithCatch(resolve, reject, newPromise));
                return newPromise;
            }
            case REJECTED: {
                const newPromise = new MyPromise((resolve, reject) =>
                    rejectedFnWithCatch(resolve, reject, newPromise));
                return newPromise;
            }
            case PENDING: {
                const newPromise = new MyPromise((resolve, reject) => {
                    this.FULFILLED_CALLBACK_LIST.push(() =>
                        fulFilledFnWithCatch(resolve, reject, newPromise));
                    this.REJECTED_CALLBACK_LIST.push(() =>
                        rejectedFnWithCatch(resolve, reject, newPromise));
                });
                return newPromise;
            }
            default: {
                break;
            }
        }
    }

    catch (onRejected) {
        return this.then(null, onRejected);
    }

    resolvePromise(newPromise, x, resolve, reject) {
        // 如果 newPromise 和 x 指向同⼀对象，以 TypeError 为据因拒绝执⾏ newPromise
        // 这是为了防⽌死循环
        if (newPromise === x) {
            return reject(new TypeError('The promise and the return value are the same'));
        }
        if (x instanceof MyPromise) {
            // 如果 x 为 Promise ，则使 newPromise 接受 x 的状态
            // 也就是继续执⾏x，如果执⾏的时候拿到⼀个y，还要继续解析y
            // 这个if跟下⾯判断then然后拿到执⾏其实重复了，可有可⽆
            x.then((y) => {
                resolvePromise(newPromise, y, resolve, reject);
            }, reject);
        } else if (typeof x === 'object' || this.isFunction(x)) {
            // 如果 x 为对象或者函数
            // 这个坑是跑测试的时候发现的，如果x是null，应该直接resolve
            if (x === null) {
                return resolve(x);
            }
            let then = null;
            try {
                // 把 x.then 赋值给 then 
                then = x.then;
            } catch (error) {
                // 如果取 x.then 的值时抛出错误 e ，则以 e 为据因拒绝 promise
                return reject(error);
            }
            // 如果 then 是函数
            if (this.isFunction(then)) {
            
                //防止多次调用，是一个防并发的操作
                let called = false;
                // 将 x 作为函数的作⽤域 this 调⽤之
                // 传递两个回调函数作为参数，第⼀个参数叫做 resolvePromise ，第⼆个参数叫做 rejectPromise
                // 名字重名了，我直接⽤匿名函数了
                try {
                    then.call(x,
                        // 如果 resolvePromise 以值 y 为参数被调⽤，则运⾏resolvePromise
                        (y) => {
                            // 如果 resolvePromise 和 rejectPromise 均被调⽤，
                            // 或者被同⼀参数调⽤了多次，则优先采⽤⾸次调⽤并忽略剩下的调⽤
                            // 实现这条需要前⾯加⼀个变量called
                            if (called) return;
                            called = true;
                            resolvePromise(promise, y, resolve, reject);
                        },
                        // 如果 rejectPromise 以据因 r 为参数被调⽤，则以据因 r 拒绝promise
                        (r) => {
                            if (called) return;
                            called = true;
                            reject(r);
                        });
                } catch (error) {
                    // 如果调⽤ then ⽅法抛出了异常 e：
                    // 如果 resolvePromise 或 rejectPromise 已经被调⽤，则忽略之
                    if (called) return;
                    // 否则以 e 为据因拒绝 promise
                    reject(error);
                }
            } else {
                // 如果 then 不是函数，以 x 为参数执⾏ promise
                resolve(x);
            }
        } else {
            // 如果 x 不为对象或者函数，以 x 为参数执⾏ promise
            resolve(x);
        }
    }

    isFunction(params) {
        return typeof params === 'function';
    }
    
        static resolve(value) {
        if (value instanceof MyPromise) {
            return value;
        }

        return new MyPromise((resolve) => {
            resolve(value);
        });
    }

    static reject(reason) {
        return new MyPromise((resolve, reject) => {
            reject(reason);
        });
    }

    static race(promiseList) {
        return new MyPromise((resolve, reject) => {
            const length = promiseList.length;

            if (length === 0) {
                return resolve();
            } else {
                for (let i = 0; i < length; i++) {
                    MyPromise.resolve(promiseList[i]).then(
                        (value) => {
                            return resolve(value);
                        },
                        (reason) => {
                            return reject(reason);
                        });
                }
            }
        });

    }
}

自动化测试

npm i promises-aplus-tests -g

MyPromise.defer = MyPromise.deferred = function () {
  let dfd = {}
  dfd.promise = new MyPromise((resolve,reject)=>{
    dfd.resolve = resolve;
    dfd.reject = reject;
  });
  return dfd;
}

Promise常用示例

异步加载图片

function loadImageAsync(url) {
  return new Promise(function(resolve, reject) {
    const image = new Image();

    image.onload = function() {
      resolve(image);
    };

    image.onerror = function() {
      reject(new Error('Could not load image at ' + url));
    };

    image.src = url;
  });
}

Ajax

const getJSON = function(url) {
  const promise = new Promise(function(resolve, reject){
    const handler = function() {
      if (this.readyState !== 4) {
        return;
      }
      if (this.status === 200) {
        resolve(this.response);
      } else {
        reject(new Error(this.statusText));
      }
    };
    const client = new XMLHttpRequest();
    client.open("GET", url);
    client.onreadystatechange = handler;
    client.responseType = "json";
    client.setRequestHeader("Accept", "application/json");
    client.send();

  });

  return promise;
};

立即 resolved 的 Promise 是在本轮事件循环的末尾执行，总是晚于本轮循环的同步任务; 但是加上return语句，就不同了。

new Promise((resolve, reject) => {
  resolve(1);
  console.log(2);
}).then(r => {
  console.log(r);
});
// 2
// 1
new Promise((resolve, reject) => {
  return resolve(1);
  // 后面的语句不会执行
  console.log(2);
}).then(r => {
  console.log(r);
});
// 1

Promise.all场景:

const p1 = new Promise((resolve, reject) => {
  resolve('hello');
})
.then(result => result)
.catch(e => e);

const p2 = new Promise((resolve, reject) => {
  throw new Error('报错了');
})
.then(result => result)
.catch(e => e);

Promise.all([p1, p2])
.then(result => console.log(result))
.catch(e => console.log(e));
// ["hello", Error: 报错了]

- p1会resolved，p2首先会rejected，但是p2有自己的catch方法，该方法返回的是一个新的 Promise 实例，p2指向的实际上是这个实例。该实例执行完catch方法后，也会变成resolved，导致Promise.all()方法参数里面的两个实例都会resolved，因此会调用then方法指定的回调函数，而不会调用catch方法指定的回调函数
- 如果p2没有自己的catch方法，就会调用Promise.all()的catch方法。
Promise.allSettled()

const resolved = Promise.resolve(42);
const rejected = Promise.reject(-1);

const allSettledPromise = Promise.allSettled([resolved, rejected]);

allSettledPromise.then(function (results) {
  console.log(results);
});
// [
//    { status: 'fulfilled', value: 42 },
//    { status: 'rejected', reason: -1 }
// ]

- 该方法返回的新的 Promise 实例，一旦结束，状态总是fulfilled，不会变成rejected。状态变成fulfilled后，Promise 的监听函数接收到的参数是一个数组，每个成员对应一个传入Promise.allSettled()的 Promise 实例
- 每个对象都有status属性，该属性的值只可能是字符串fulfilled或字符串rejected。fulfilled时，对象有value属性，rejected时有reason属性，对应两种状态的返回值

迭代器 Iterator

迭代器Iterator 是 ES6 引入的一种新的遍历机制，同时也是一种特殊对象，它具有一些专门为迭代过程设计的专有接口。

每个迭代器对象都有一个next()方法，每次调用都返回一个当前结果对象。当前结果对象中有两个属性：

value：当前属性的值
done：用于判断是否遍历结束，当没有更多可返回的数据时，返回true

每调用一次next()方法，都会返回下一个可用的值，直到遍历结束。

生成器 Generator

生成器是一种返回迭代器的函数，通过function关键字后的星号(*)来表示，函数中会用到新的关键字yield。星号可以紧挨着function关键字，也可以在中间添加一个空格.
形式上，Generator 函数是一个普通函数，但是有两个特征。一是，function关键字与函数名之间有一个星号；二是，函数体内部使用yield表达式，定义不同的内部状态

特性

每当执行完一条yield语句后函数就会自动停止执行, 直到再次调用next();
yield关键字只可在生成器内部使用，在其他地方使用会导致程序抛出错误;
可以通过函数表达式来创建生成器, 但是不能使用箭头函数
let generator = function *(){}

function getFoo () {
  return new Promise(function (resolve, reject){
    resolve('foo');
  });
}

const g = function* () {
  try {
    const foo = yield getFoo();
    console.log(foo);
  } catch (e) {
    console.log(e);
  }
};

function run (generator) {
  const it = generator();

  function go(result) {
    if (result.done) return result.value;

    return result.value.then(function (value) {
      return go(it.next(value));
    }, function (error) {
      return go(it.throw(error));
    });
  }

  go(it.next());
}

run(g);

除了for...of循环以外，扩展运算符（...）、解构赋值和Array.from方法内部调用的，都是遍历器接口。这意味着，它们都可以将 Generator 函数返回的 Iterator 对象，作为参数

function* numbers () {
  yield 1
  yield 2
  return 3
  yield 4
}

// 扩展运算符
[...numbers()] // [1, 2]

// Array.from 方法
Array.from(numbers()) // [1, 2]

// 解构赋值
let [x, y] = numbers();
x // 1
y // 2

// for...of 循环
for (let n of numbers()) {
  console.log(n)
}
// 1
// 2

如果 Generator 函数内部有try...finally代码块，且正在执行try代码块，那么return()方法会导致立刻进入finally代码块，执行完以后，整个函数才会结束

function* numbers () {
  yield 1;
  try {
    yield 2;
    yield 3;
  } finally {
    yield 4;
    yield 5;
  }
  yield 6;
}
var g = numbers();
g.next() // { value: 1, done: false }
g.next() // { value: 2, done: false }
g.return(7) // { value: 4, done: false }
g.next() // { value: 5, done: false }
g.next() // { value: 7, done: true }

自执行函数;自执行函数的作用是将generator函数转换为同步化顺序执行的函数
- Thunkify实现自执行函数

import fetch from 'isomorphic-fetch';
//thunkify是一个nodejs库
const thunkify = require('thunkify');
const fetchThunk = thunkify(fetch);

const genFnAsync = async function (){
    console.log('step 1');
    var f1 = await fetch('http://localhost:9000/h5/api/mobile/unionFrontVersion');
    console.log('step 2', f1.json().then((data)=>{console.log(data)}));
    var f2 = await fetch('http://localhost:9000/h5/api/mobile/unionFrontVersion');
    console.log('step 3', f2);
    var f3 = await "213213";
    console.log('step 4', f3);
};

const thenableResolve = {
    then: function (resolve, reject) {
        resolve("thenableResolve");
    }
}
const thenableReject = {
    then: function (resolve, reject) {
        reject("thenableReject");
    }
}

//ES5
var Thunk5 = function (fn) {
    return function () {
        var args = Array.prototype.slice.call(arguments);
        return function (callback) {
            args.push(callback);
            return fn.apply(this, args);
        }
    }
}

//ES6
const Thunk6 = function (fn) {
    return function (...args) {
        return function (callback) {
            return fn.call(this, ...args, callback);
        }
    }
}

const isPromise = (obj)=>{
    return 'function' == typeof obj.then;
}

const run = function (fn) {
    var gen = fn();
    function next(error, data) {
        var result = gen.next(data);
        if(result.done) return;
        //启动函数为 promise对象
        if (isPromise(result.value)) {
            result.value.then(function(data) {
                next(data);
            });
        } else {
            //启动函数为 回调函数
            result.value(next)
        }
    }
    next();
}

- 使用co自动化执行Generator函数;co 函数返回一个 Promise 对象，因此可以用 then 方法添加回调函数。

var co = require('co');
var gen = function* (){
  var f1 = yield readFile('/core/test1');
  var f2 = yield readFile('/core/test2');
  console.log(f1.toString());
  console.log(f2.toString());
};
co(gen).then(function (){
  console.log('Generator 函数执行完成');
})

（1）回调函数。将异步操作包装成 Thunk 函数，在回调函数里面交回执行权。
（2）Promise 对象。将异步操作包装成 Promise 对象，用 then 方法交回执行权。

co 函数库其实就是将两种自动执行器（Thunk 函数和 Promise 对象），包装成一个库。使用 co 的前提条件是，Generator 函数的 yield 命令后面，只能是 Thunk 函数或 Promise 对象。

co 支持并发的异步操作，即允许某些操作同时进行，等到它们全部完成，才进行下一步。这时，要把并发的操作都放在数组或对象里面。

// 数组的写法
co(function* () {
  var res = yield [
    Promise.resolve(1),
    Promise.resolve(2)
  ];
  console.log(res); 
}).catch(onerror);

// 对象的写法
co(function* () {
  var res = yield {
    1: Promise.resolve(1),
    2: Promise.resolve(2),
  };
  console.log(res); 
}).catch(onerror);

Promise

PromiseA+规范

术语

规范

状态 promise status

then

⼀步步实现⼀个Promise;理解其巧妙的内含。

迭代器 Iterator

生成器 Generator

特性

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读