前言

谈到Promise，大家都熟烂于心，有的童鞋已经在项目中大规模使用async/await，甚至有的开始用上了fetch。无论什么方式，实质都是Promise的封装和语法糖，所以弄清楚了Promise的来龙去脉，有助于更好地理解和使用Promise。

历史演变

callbackobserversJSDeferredjQuery DeferredPromise(*)generatorasync/awaitfetch

callback

网上曾流传一张这样的图（如上图所示）来形容(callback hell)回调地狱，可以说很生动形象了。代码规范做得好一点的童鞋可能会把回调函数拆开，但如果不谨慎，一不小心就会写出这样的代码来。在刀耕火种年代，回调是最为快捷有效的办法。其思想是把要执行的代码作为函数参数传递，然后在异步代码执行完执行传入的回调函数。

const fetchApi = (callback) => {setTimeout(() => {//todo something...callback && calback();}, 1000);};fetachApi(() => {//some code...});复制代码

这样虽然可以解决问题，但是还存在以下几个问题：

代码易读性差代码不紧凑依然会有callback hell问题

observers

观察者模式，jQuery三行代码搞定发布订阅模式

//订阅$.on(document, function() {});//取消订阅$.off(document, function() {});//发布$.trigger(document, function() {});复制代码

listeners

EventEmitter

const EventEmitter = require('Event.EventEmitter');const eventEmitter = new EventEmitter();eventEmitter.on('data', () => {//some code...});eventEmitter.emit();复制代码

DOM事件

document.onclick = function() {//some code...}复制代码

jQuery事件绑定

$(document).on('click', function() {//some code...})复制代码

JSDeferred

Promise里程碑，在Promise还没形成规范之前，各大库（mochikit,dojo，jQuery...）百花齐放，都实现了各自的Promise模型。

jQuery Deferred

Promise先驱者，前端新人可能对jQuery比较熟悉，在平时的工作中，据我所知，我身边的前端童鞋几乎都不知道这个jQuery的这个api。其实早在Promise诞生前，jQuery内部已经实现Promise类似功能，只是没有成为规范被纳入。

$.Deferred$.when()复制代码

Promise

这个是本文讲述的重点

const promise = new Promise((resolve, reject) => {if (data) {resolve(data);}else {reject(error);}});promise.then(data => {//some code... });Promise.all([fetchApi1, fetchApi2]);Promise.trace([fetchApi1, fetchApi2]);复制代码

generator

迭代器模式, async/await过渡产品

const loginHandler = *() => {yield fetchApi();}loginHandler.next();复制代码

async/await

像写同步代码一样书写异步代码

const loginHandler = async () => {const data = await fetchApi();//do something with data...};复制代码

fetch

未来的ajax

fetach(apiUrl, data => data.json() => data ).then(data => {//some code...});复制代码