[TOC] 首先 我们需要知道 Promise 是 什么东西，为什么需要它！ 对于前端 异步的概念，同学们都应该有过这样的经历，Ajax 的 `success /error` 回调，这样的方式算是最早的异步回调了。对于回调（callback）有时候是令人反感的，比如当你陷入 回调地狱 时。 [原生 Promises](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise) 是在 ES2015 对 JavaScript 做出最大的改变。它的出现消除了采用 callback 机制的很多潜在问题，并允许我们采用近乎同步的逻辑去写异步代码。 可以说 promises 和 [generators](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Statements/function%2a)，代表了异步编程的新标准。 ## Promise A+ 规范 * 官方英文地址：[https://promisesaplus.com/](https://promisesaplus.com/) * 中文翻译可参考：[http://malcolmyu.github.io/malnote/2015/06/12/Promises-A-Plus/](http://malcolmyu.github.io/malnote/2015/06/12/Promises-A-Plus/) # 实现过程 Promise 设计模式原理及在 ES6 中的应用，手写一个符合 Promise A+规范的 Promise 实现 # promise ``` function _Promise(fn) { var self = this; this.state = 'pending'; this.value = null; this.callbacks = []; this.then = function(onFulfilled, onRejected) { // 返回一个新的Promise对象 return new _Promise(function(resolve, reject) { handleCallback({ onFulfilled: onFulfilled || null, onRejected: onRejected || null, resolve: resolve, reject: reject }) }) } function handleCallback(callback) { if(self.state === 'pending') { self.callbacks.push(callback); return; } var cb = self.state === 'fulfilled' ? callback.onFulfilled : callback.onRejected; if(cb === null) { cb = self.state === 'fulfilled' ? callback.resolve : callback.reject; cb(self.value); return; } // 加入try-catch防止执行回调出错 try { var res = cb(self.value); callback.resolve(res); }catch(e) { callback.reject(e); } } function resolve(endValue) { if(endValue && (typeof endValue === 'object') && typeof endValue.then === 'function') { endValue.then(resolve, reject); return; } self.state = 'fulfilled'; self.value = endValue; console.log("set:" + self.callbacks.length); excute(); } function reject(reason) { self.state = 'rejected'; self.value = reason; excute(); } function excute() { // 让所有回调函数进入下一个事件循环执行 setTimeout(function(){ self.callbacks.forEach(function(callback) { handleCallback(callback); }) },0); } fn(resolve, reject) } // 测试代码： var a = new _Promise( function(resolve) { resolve(1); }) a.then(x => { return new _Promise(function (resolve) { setTimeout(( )=> { resolve(x+1) console.log(x); }, 2000) }) }).then(x => { return new _Promise(function (resolve) { setTimeout(() => { resolve(x+1) console.log(x); }, 2000) }) }).then( x => console.log(x) ) ``` * Promise.all * Promise.race * Promise 并行限制 > [promise-polyfill](https://github.com/taylorhakes/promise-polyfill/) # 参考 [q](https://github.com/kriskowal/q) [Promise 测试](https://github.com/whu-luojian/Promise.git) [promisejs - Implementing](https://www.promisejs.org/implementing/) [Promises 讲解](https://www.cnblogs.com/superAnny/p/7622893.html) # 附录 [手写 Promise 所有方法实现](https://www.jianshu.com/p/5119e01a036f) [Promise/Generator/Co](https://www.cnblogs.com/JoeChan/p/4943384.html) [常见Promise面试题](https://blog.csdn.net/weixin_34090562/article/details/88672431) [Promise链式调用 终止或取消](https://www.cnblogs.com/gqx-html/p/10967412.html)