前言

談到Promise，大家都熟爛于心，有的童鞋已經在項目中大規模使用async/await，甚至有的開始用上了fetch。無論什么方式，實質都是Promise的封裝和語法糖，所以弄清楚了Promise的來龍去脈，有助于更好地理解和使用Promise。

歷史演變

• callback
• observers
• JSDeferred
• jQuery Deferred
• Promise(*)
• generator
• async/await
• fetch

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... }); 復制代碼

總結

以上是生活随笔為你收集整理的谈谈Promise的前世今生的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。