Promise是JS异步编程中的重要概念，异步抽象处理对象，是目前比较流行Javascript异步编程解决方案之一

2对于几种常见异步编程方案

• 回调函数

• 事件监听

• 发布/订阅

• Promise对象

这里就拿回调函数说说

1.对于回调函数 我们用Jquery的ajax获取数据时 都是以回调函数方式获取的数据

$.get(url, (data) => {    console.log(data))

2.如果说 当我们需要发送多个异步请求 并且每个请求之间需要相互依赖 那这时 我们只能 以嵌套方式来解决 形成 “回调地狱”

$.get(url, data1 => {    console.log(data1)    $.get(data1.url, data2 => {        console.log(data1)    })})

这样一来，在处理越多的异步逻辑时，就需要越深的回调嵌套，这种编码模式的问题主要有以下几个：

• 代码逻辑书写顺序与执行顺序不一致，不利于阅读与维护。

• 异步操作的顺序变更时，需要大规模的代码重构。

• 回调函数基本都是匿名函数，bug 追踪困难。

• 回调函数是被第三方库代码(如上例中的 ajax )而非自己的业务代码所调用的，造成了 IoC 控制反转。

Promise 处理多个相互关联的异步请求

1.而我们Promise 可以更直观的方式 来解决 “回调地狱”

const request = url => {     return new Promise((resolve, reject) => {        $.get(url, data => {            resolve(data)        });    })};

// 请求data1request(url).then(data1 => {    return request(data1.url);   }).then(data2 => {    return request(data2.url);}).then(data3 => {    console.log(data3);}).catch(err => throw new Error(err));

2.相信大家在 vue/react 都是用axios fetch 请求数据 也都支持 Promise API

import axios from 'axios';axios.get(url).then(data => {   console.log(data)})

Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中。

3Promise使用

1.Promise 是一个构造函数， new Promise 返回一个 promise对象 接收一个excutor执行函数作为参数, excutor有两个函数类型形参resolve reject

const promise = new Promise((resolve, reject) => {       // 异步处理       // 处理结束后、调用resolve 或 reject});

2.promise相当于一个状态机

promise的三种状态

• pending

• fulfilled

• rejected

1.promise 对象初始化状态为 pending

2.当调用resolve(成功)，会由pending => fulfilled

3.当调用reject(失败)，会由pending => rejected

注意promsie状态 只能由 pending => fulfilled/rejected, 一旦修改就不能再变

3.promise对象方法

1.then方法注册 当resolve(成功)/reject(失败)的回调函数

// onFulfilled 是用来接收promise成功的值// onRejected 是用来接收promise失败的原因promise.then(onFulfilled, onRejected);

then方法是异步执行的

2.resolve(成功) onFulfilled会被调用

const promise = new Promise((resolve, reject) => {   resolve('fulfilled'); // 状态由 pending => fulfilled});promise.then(result => { // onFulfilled    console.log(result); // 'fulfilled' }, reason => { // onRejected 不会被调用

})

3.reject(失败) onRejected会被调用

const promise = new Promise((resolve, reject) => {   reject('rejected'); // 状态由 pending => rejected});promise.then(result => { // onFulfilled 不会被调用

}, reason => { // onRejected     console.log(reason); // 'rejected'})

4.promise.catch

在链式写法中可以捕获前面then中发送的异常

promise.catch(onRejected)相当于promise.then(null, onRrejected);

// 注意// onRejected 不能捕获当前onFulfilled中的异常promise.then(onFulfilled, onRrejected); 

// 可以写成：promise.then(onFulfilled)       .catch(onRrejected);   

4.Promise chain

promise.then方法每次调用 都返回一个新的promise对象 所以可以链式写法

function taskA() {    console.log("Task A");}function taskB() {    console.log("Task B");}function onRejected(error) {    console.log("Catch Error: A or B", error);}

var promise = Promise.resolve();promise    .then(taskA)    .then(taskB)    .catch(onRejected) // 捕获前面then方法中的异常 

5.Promise的静态方法

1. Promise.resolve 返回一个fulfilled状态的promise对象

Promise.resolve('hello').then(function(value){    console.log(value);});

Promise.resolve('hello');// 相当于const promise = new Promise(resolve => {   resolve('hello');});

2.Promise.reject 返回一个rejected状态的promise对象

Promise.reject(24);new Promise((resolve, reject) => {   reject(24);});

3.Promise.all 接收一个promise对象数组为参数

只有全部为resolve才会调用 通常会用来处理 多个并行异步操作

const p1 = new Promise((resolve, reject) => {    resolve(1);});

const p2 = new Promise((resolve, reject) => {    resolve(2);});

const p3 = new Promise((resolve, reject) => {    reject(3);});

Promise.all([p1, p2, p3]).then(data => {     console.log(data); // [1, 2, 3] 结果顺序和promise实例数组顺序是一致的}, err => {    console.log(err);});

4.Promise.race 接收一个promise对象数组为参数

Promise.race 只要有一个promise对象进入 FulFilled 或者 Rejected 状态的话，就会继续进行后面的处理。

function timerPromisefy(delay) {    return new Promise(function (resolve, reject) {        setTimeout(function () {            resolve(delay);        }, delay);    });}var startDate = Date.now();

Promise.race([    timerPromisefy(10),    timerPromisefy(20),    timerPromisefy(30)]).then(function (values) {    console.log(values); // 10});

5.Promise的finally

Promise.prototype.finally = function (callback) {  let P = this.constructor;  return this.then(    value  => P.resolve(callback()).then(() => value),    reason => P.resolve(callback()).then(() => { throw reason })  );};

4Promise代码实现

/** * Promise 实现 遵循promise/A+规范 * Promise/A+规范译文: * https://malcolmyu.github.io/2015/06/12/Promises-A-Plus/#note-4 */

// promise 三个状态const PENDING = "pending";const FULFILLED = "fulfilled";const REJECTED = "rejected";

function Promise(excutor) {    let that = this; // 缓存当前promise实例对象    that.status = PENDING; // 初始状态    that.value = undefined; // fulfilled状态时 返回的信息    that.reason = undefined; // rejected状态时 拒绝的原因    that.onFulfilledCallbacks = []; // 存储fulfilled状态对应的onFulfilled函数    that.onRejectedCallbacks = []; // 存储rejected状态对应的onRejected函数

    function resolve(value) { // value成功态时接收的终值        if(value instanceof Promise) {            return value.then(resolve, reject);        }

        // 为什么resolve 加setTimeout?        // 2.2.4规范 onFulfilled 和 onRejected 只允许在 execution context 栈仅包含平台代码时运行.        // 注1 这里的平台代码指的是引擎、环境以及 promise 的实施代码。实践中要确保 onFulfilled 和 onRejected 方法异步执行，且应该在 then 方法被调用的那一轮事件循环之后的新执行栈中执行。

        setTimeout(() => {            // 调用resolve 回调对应onFulfilled函数            if (that.status === PENDING) {                // 只能由pending状态 => fulfilled状态 (避免调用多次resolve reject)                that.status = FULFILLED;                that.value = value;                that.onFulfilledCallbacks.forEach(cb => cb(that.value));            }        });    }

    function reject(reason) { // reason失败态时接收的拒因        setTimeout(() => {            // 调用reject 回调对应onRejected函数            if (that.status === PENDING) {                // 只能由pending状态 => rejected状态 (避免调用多次resolve reject)                that.status = REJECTED;                that.reason = reason;                that.onRejectedCallbacks.forEach(cb => cb(that.reason));            }        });    }

    // 捕获在excutor执行器中抛出的异常    // new Promise((resolve, reject) => {    //     throw new Error('error in excutor')    // })    try {        excutor(resolve, reject);    } catch (e) {        reject(e);    }}

/** * resolve中的值几种情况： * 1.普通值 * 2.promise对象 * 3.thenable对象/函数 */

/** * 对resolve 进行改造增强 针对resolve中不同值情况 进行处理 * @param  {promise} promise2 promise1.then方法返回的新的promise对象 * @param  {[type]} x         promise1中onFulfilled的返回值 * @param  {[type]} resolve   promise2的resolve方法 * @param  {[type]} reject    promise2的reject方法 */function resolvePromise(promise2, x, resolve, reject) {    if (promise2 === x) {  // 如果从onFulfilled中返回的x 就是promise2 就会导致循环引用报错        return reject(new TypeError('循环引用'));    }

    let called = false; // 避免多次调用    // 如果x是一个promise对象 (该判断和下面 判断是不是thenable对象重复 所以可有可无)    if (x instanceof Promise) { // 获得它的终值 继续resolve        if (x.status === PENDING) { // 如果为等待态需等待直至 x 被执行或拒绝 并解析y值            x.then(y => {                resolvePromise(promise2, y, resolve, reject);            }, reason => {                reject(reason);            });        } else { // 如果 x 已经处于执行态/拒绝态(值已经被解析为普通值)，用相同的值执行传递下去 promise            x.then(resolve, reject);        }        // 如果 x 为对象或者函数    } else if (x != null && ((typeof x === 'object') || (typeof x === 'function'))) {        try { // 是否是thenable对象(具有then方法的对象/函数)            let then = x.then;            if (typeof then === 'function') {                then.call(x, y => {                    if(called) return;                    called = true;                    resolvePromise(promise2, y, resolve, reject);                }, reason => {                    if(called) return;                    called = true;                    reject(reason);                })            } else { // 说明是一个普通对象/函数                resolve(x);            }        } catch(e) {            if(called) return;            called = true;            reject(e);        }    } else {        resolve(x);    }}

/** * [注册fulfilled状态/rejected状态对应的回调函数] * @param  {function} onFulfilled fulfilled状态时 执行的函数 * @param  {function} onRejected  rejected状态时 执行的函数 * @return {function} newPromsie  返回一个新的promise对象 */Promise.prototype.then = function(onFulfilled, onRejected) {    const that = this;    let newPromise;    // 处理参数默认值 保证参数后续能够继续执行    onFulfilled =        typeof onFulfilled === "function" ? onFulfilled : value => value;    onRejected =        typeof onRejected === "function" ? onRejected : reason => {            throw reason;        };

    // then里面的FULFILLED/REJECTED状态时 为什么要加setTimeout ?    // 原因:    // 其一 2.2.4规范 要确保 onFulfilled 和 onRejected 方法异步执行(且应该在 then 方法被调用的那一轮事件循环之后的新执行栈中执行) 所以要在resolve里加上setTimeout    // 其二 2.2.6规范 对于一个promise，它的then方法可以调用多次.(当在其他程序中多次调用同一个promise的then时 由于之前状态已经为FULFILLED/REJECTED状态，则会走的下面逻辑),所以要确保为FULFILLED/REJECTED状态后 也要异步执行onFulfilled/onRejected

    // 其二 2.2.6规范 也是resolve函数里加setTimeout的原因    // 总之都是 让then方法异步执行 也就是确保onFulfilled/onRejected异步执行

    // 如下面这种情景 多次调用p1.then    // p1.then((value) => { // 此时p1.status 由pedding状态 => fulfilled状态    //     console.log(value); // resolve    //     // console.log(p1.status); // fulfilled    //     p1.then(value => { // 再次p1.then 这时已经为fulfilled状态 走的是fulfilled状态判断里的逻辑 所以我们也要确保判断里面onFuilled异步执行    //         console.log(value); // 'resolve'    //     });    //     console.log('当前执行栈中同步代码');    // })    // console.log('全局执行栈中同步代码');    //

    if (that.status === FULFILLED) { // 成功态        return newPromise = new Promise((resolve, reject) => {            setTimeout(() => {                try{                    let x = onFulfilled(that.value);                    resolvePromise(newPromise, x, resolve, reject); // 新的promise resolve 上一个onFulfilled的返回值                } catch(e) {                    reject(e); // 捕获前面onFulfilled中抛出的异常 then(onFulfilled, onRejected);                }            });        })    }

    if (that.status === REJECTED) { // 失败态        return newPromise = new Promise((resolve, reject) => {            setTimeout(() => {                try {                    let x = onRejected(that.reason);                    resolvePromise(newPromise, x, resolve, reject);                } catch(e) {                    reject(e);                }            });        });    }

    if (that.status === PENDING) { // 等待态        // 当异步调用resolve/rejected时 将onFulfilled/onRejected收集暂存到集合中        return newPromise = new Promise((resolve, reject) => {            that.onFulfilledCallbacks.push((value) => {                try {                    let x = onFulfilled(value);                    resolvePromise(newPromise, x, resolve, reject);                } catch(e) {                    reject(e);                }            });            that.onRejectedCallbacks.push((reason) => {                try {                    let x = onRejected(reason);                    resolvePromise(newPromise, x, resolve, reject);                } catch(e) {                    reject(e);                }            });        });    }};

/** * Promise.all Promise进行并行处理 * 参数: promise对象组成的数组作为参数 * 返回值: 返回一个Promise实例 * 当这个数组里的所有promise对象全部变为resolve状态的时候，才会resolve。 */Promise.all = function(promises) {    return new Promise((resolve, reject) => {        let done = gen(promises.length, resolve);        promises.forEach((promise, index) => {            promise.then((value) => {                done(index, value)            }, reject)        })    })}

function gen(length, resolve) {    let count = 0;    let values = [];    return function(i, value) {        values[i] = value;        if (++count === length) {            console.log(values);            resolve(values);        }    }}

/** * Promise.race * 参数: 接收 promise对象组成的数组作为参数 * 返回值: 返回一个Promise实例 * 只要有一个promise对象进入 FulFilled 或者 Rejected 状态的话，就会继续进行后面的处理(取决于哪一个更快) */Promise.race = function(promises) {    return new Promise((resolve, reject) => {        promises.forEach((promise, index) => {           promise.then(resolve, reject);        });    });}

// 用于promise方法链时 捕获前面onFulfilled/onRejected抛出的异常Promise.prototype.catch = function(onRejected) {    return this.then(null, onRejected);}

Promise.resolve = function (value) {    return new Promise(resolve => {        resolve(value);    });}

Promise.reject = function (reason) {    return new Promise((resolve, reject) => {        reject(reason);    });}

/** * 基于Promise实现Deferred的 * Deferred和Promise的关系 * - Deferred 拥有 Promise * - Deferred 具备对 Promise的状态进行操作的特权方法(resolve reject) * *参考jQuery.Deferred *url: http://api.jquery.com/category/deferred-object/ */Promise.deferred = function() { // 延迟对象    let defer = {};    defer.promise = new Promise((resolve, reject) => {        defer.resolve = resolve;        defer.reject = reject;    });    return defer;}

/** * Promise/A+规范测试 * npm i -g promises-aplus-tests * promises-aplus-tests Promise.js */

try {  module.exports = Promise} catch (e) {}

Promise测试

npm i -g promises-aplus-testspromises-aplus-tests Promise.js

如何主动终止Promise调用链

const p1 = new Promise((resolve, reject) => {  setTimeout(() => { // 异步操作      resolve('start')  }, 1000);});

p1.then((result) => {   console.log('a', result);    return Promise.reject('中断后续调用'); // 此时rejected的状态将直接跳到catch里，剩下的调用不会再继续}).then(result => {   console.log('b', result);}).then(result => {   console.log('c', result);}).catch(err => {   console.log(err);});

// a start// 中断后续调用

珠峰前端课程开课时间

2019年3月11日 《零基础入门课程》 2019年3月4日   《全日制框架课程》

2019年3月4日   《周末班框架课程》 

2019年3月11日 《前端就业课程》