本文首發(fā)于 vivo互聯(lián)網(wǎng)技術(shù) 微信公眾號
成都創(chuàng)新互聯(lián)公司2013年至今,是專業(yè)互聯(lián)網(wǎng)技術(shù)服務(wù)公司,擁有項(xiàng)目成都做網(wǎng)站、成都網(wǎng)站制作網(wǎng)站策劃,項(xiàng)目實(shí)施與項(xiàng)目整合能力。我們以讓每一個夢想脫穎而出為使命,1280元郊區(qū)做網(wǎng)站,已為上家服務(wù),為郊區(qū)各地企業(yè)和個人服務(wù),聯(lián)系電話:13518219792
鏈接: https://mp.weixin.qq.com/s/UNzYgpnKzmW6bAapYxnXRQ
作者:孔垂亮
很多同學(xué)在學(xué)習(xí) Promise 時(shí),知其然卻不知其所以然,對其中的用法理解不了。 本系列文章由淺入深逐步實(shí)現(xiàn) Promise,并結(jié)合流程圖、實(shí)例以及動畫進(jìn)行演示,達(dá)到深刻理解 Promise 用法的目的。
本系列文章有如下幾個章節(jié)組成:
圖解 Promise 實(shí)現(xiàn)原理(一)—— 基礎(chǔ)實(shí)現(xiàn)
圖解 Promise 實(shí)現(xiàn)原理(二)—— Promise 鏈?zhǔn)秸{(diào)用
圖解 Promise 實(shí)現(xiàn)原理(三)—— Promise 原型方法實(shí)現(xiàn)
圖解 Promise 實(shí)現(xiàn)原理(四)—— Promise 靜態(tài)方法實(shí)現(xiàn)
本文適合對 Promise 的用法有所了解的人閱讀,如果還不清楚,請自行查閱阮一峰老師的 《 ES6入門 之 Promise 對象》。
Promise 規(guī)范有很多,如 Promise/A,Promise/B,Promise/D 以及 Promise/A 的升級版 Promise/A+,有興趣的可以去了解下,最終 ES6 中采用了 Promise/A+ 規(guī)范。所以本文的Promise源碼是按照 Promise/A+規(guī)范來編寫的(不想看英文版的移步 Promise/A+規(guī)范中文翻譯)。
為了讓大家更容易理解,我們從一個場景開始,一步一步跟著思路思考,會更容易看懂。
考慮下面一種獲取用戶 id 的請求處理:
//不使用Promise http.get('some_url', function (result) { //do something console.log(result.id); });//使用Promisenew Promise(function (resolve) { //異步請求 http.get('some_url', function (result) { resolve(result.id) }) }).then(function (id) { //do something console.log(id); })
乍一看,好像不使用 Promise 更簡潔一些。其實(shí)不然,設(shè)想一下,如果有好幾個依賴的前置請求都是異步的,此時(shí)如果沒有 Promise ,那回調(diào)函數(shù)要一層一層嵌套,看起來就很不舒服了。如下:
//不使用Promise http.get('some_url', function (id) { //do something http.get('getNameById', id, function (name) { //do something http.get('getCourseByName', name, function (course) { //dong something http.get('getCourseDetailByCourse', function (courseDetail) { //do something }) }) }) });//使用Promisefunction getUserId(url) { return new Promise(function (resolve) { //異步請求 http.get(url, function (id) { resolve(id) }) }) } getUserId('some_url').then(function (id) { //do something return getNameById(id); // getNameById 是和 getUserId 一樣的Promise封裝。下同}).then(function (name) { //do something return getCourseByName(name); }).then(function (course) { //do something return getCourseDetailByCourse(course); }).then(function (courseDetail) { //do something});