国产探花免费观看_亚洲丰满少妇自慰呻吟_97日韩有码在线_资源在线日韩欧美_一区二区精品毛片,辰东完美世界有声小说,欢乐颂第一季,yy玄幻小说排行榜完本

首頁 > 編程 > JavaScript > 正文

JS中Promise函數then的奧秘探究

2019-11-19 13:23:35
字體:
來源:轉載
供稿:網友

Promise概述

Promise對象是CommonJS工作組提出的一種規范,目的是為異步操作提供統一接口。

那么,什么是Promises?

首先,它是一個對象,也就是說與其他JavaScript對象的用法,沒有什么兩樣;其次,它起到代理作用(proxy),充當異步操作與回調函數之間的中介。它使得異步操作具備同步操作的接口,使得程序具備正常的同步運行的流程,回調函數不必再一層層嵌套。

簡單說,它的思想是,每一個異步任務立刻返回一個Promise對象,由于是立刻返回,所以可以采用同步操作的流程。這個Promises對象有一個then方法,允許指定回調函數,在異步任務完成后調用。

Promise的then方法可以接受前一個函數的執行結果,還可以保證另一個Promise的順序執行,這到底是怎么做到的呢?

原理圖(先上圖)

問題需求

如何保證多個 promise 順序執行?

實例:

var f1 = function (){ return new Promise(function (resolve, reject){  setTimeout(function (){   console.log("f1 ok!")   resolve("f1 ok!");  }, 1000) });}var f2 = function (){ return new Promise(function (resolve, reject){  setTimeout(function (){   console.log("f2 ok!")   resolve("f2 ok!");  }, 3000) });}var f3 = function (){ return new Promise(function (resolve, reject){  setTimeout(function (){   console.log("f3 ok!")   resolve("f3 ok!");  }, 2000) });}

當然如果要并行的話,我們很容易想到 Promise.all 方法:

Promise.all([f1(), f2(), f3()]).then(function (data){ console.log(data)})// f1 ok! // f3 ok! // f2 ok! // ["f1 ok!", "f2 ok!", "f3 ok!"]

如果要順序執行:

f1().then(f2).then(f3)// f1 ok!// f2 ok!// f3 ok!//或者這樣function f(all) { var promise = Promise.resolve(); all.forEach((p, index) => {  promise = promise.then(p) })}f([f1, f2, f3])

那么問題來了,then是如何做到順序執行的呢,參數既可以是一個普通函數,也可是是一個返回promise的函數?

then的奧秘

很多實現promise的庫都比較復雜,如果自己實現的話,可以借鑒下面簡單的代碼:

Promise.prototype.then = function(onFulfilled, onRejected) { var promise = this; return new Promise(function(resolve, reject) {  function handle(value) {   var ret = typeof onFulfilled === 'function' && onFulfilled(value) || value;   if (ret && typeof ret['then'] == 'function') {    ret.then(function(value) {     resolve(value);    }, function(reason) {     reject(reason);    });   } else {    resolve(ret);   }  }  function errback(reason) {   reason = typeof onRejected === 'function' && onRejected(reason) || reason;   reject(reason);  }  if (promise._status === 'PENDING') {   promise._resolves.push(handle);   promise._rejects.push(errback);  } else if (promise._status === FULFILLED) {    callback(promise._value);  } else if (promise._status === REJECTED) {   errback(promise._reason);  } });}

重點在then的實現,看上述代碼,每個then返回的是什么,是一個新的 Promise,一個新的 Promise,一個新的 Promise
第二個重點是,在內部又處理了一個 回調函數運行結果是 一個 promise的 判斷,如果是那么等待這個promise運行結束才調用 resolve 更改狀態,關鍵是resolve的調用時機,resolve的調用時機,才能夠往下執行,這兩步就是then函數的關鍵。
是不是 有點暈,請看最開始的圖。

總結

以上就是這篇文章的全部內容了,希望本文的內容對大家的學習或者工作具有一定的參考學習價值,如果有疑問大家可以留言交流,謝謝大家對武林網的支持。

發表評論 共有條評論
用戶名: 密碼:
驗證碼: 匿名發表
主站蜘蛛池模板: 葵青区| 三穗县| 湾仔区| 那曲县| 平邑县| 垫江县| 上高县| 宝山区| 中山市| 九龙城区| 中牟县| 福建省| 宝丰县| 阜康市| 大化| 龙山县| 广宁县| 乌恰县| 武胜县| 江川县| 济阳县| 康马县| 南城县| 信宜市| 石渠县| 伊宁市| 珲春市| 平谷区| 闵行区| 河南省| 富源县| 丽水市| 肃北| 陇西县| 聂荣县| 庆云县| 昌乐县| 益阳市| 台山市| 岳普湖县| 凭祥市|