非同步解決方案promise及原始碼實現

2022-07-15 20:09:11 字數 2486 閱讀 7273

js語言的特性,造就了特別的非同步處理方式,我記得以前用的最多的就是**函式,那個時候寫jquery的ajax時候,特別喜歡寫這種**:

$.ajax(

後乙個ajax的傳送需要依賴前面的ajax的返回,也許有的朋友說還好啊,其實一兩個確實還好,但是多了就比較暈。不直觀。後面除錯起來有點麻煩。後來很多瀏覽器就自己實現了一種promise原生物件,這個物件提供一系列方法,來解決這種**帶來的不直觀,不易維護的問題。

首先,這個promise很多瀏覽器已經實現了,開發者只需要呼叫就可以,就像window,document之類的一樣。首先介紹一下它的用法吧!

我們需要通過new呼叫promise物件,這個物件需要傳入乙個函式,函式有兩個引數,分別是resolve,reject,分別代表成功和失敗兩種狀態,同時還有乙個then的方法,它也有兩函式作為引數,第乙個表示任務處理成功的後續操作,第二個表示任務處理失敗的後續操作,當我們呼叫例項上的then 的方法後,promise會根據我們在new promise過程中呼叫的是resolve還是reject來判斷應該執行哪乙個函式。

這樣我們可以簡單粗暴的改寫乙個上面那個ajax的**

這樣一來**變的更加明了,而且then方法可以一直鏈式呼叫下去,不管有多少非同步任務都可以通過then方法寫下去。

接下來,我們看看怎麼模擬這種操作,寫乙個自己的promise。

首先,我們需要設定三種狀態,成功,失敗 和 等待,也就是乙個任務完成的情況,做完了就是成功,沒做好就是失敗,還沒開始做就是等待。

這就完成了乙個promise最基本的功能,此時,如果在excutor函式中,出現乙個非同步任務,需要等待一秒才能執行resolve或者reject,此時狀態會處於pending,我們需要做乙個陣列,把這些等著狀態的任務裝起來,在reject或者resolve執行時候,遍歷陣列,乙個乙個依次執行。

接下來增加鏈式呼叫功能

到此我們還要解決使用者在then方法中隨意返回資料的問題,使用者可能返回乙個普通值,也可能返回乙個新的promise,因此還需要作進一步處理

function promise(executor) );}}

function reject(reason) )}}

try catch (e)

}function resolvepromise(p2,x,resolve,reject)

// 看x是不是乙個promise,promise應該是乙個物件

if(x!==null||(typeof x === 'object'||typeof x === 'function')),看這個物件中是否有then方法,如果有then我就認為他是promise了

trylet then = x.then;

if(typeof then === 'function'),function(err))

}else

}catch(e)

}else

}promise.prototype.then = function (onfulfilled, onrjected) )

}if (self.status === 'rejected') )

}// 當呼叫then時可能沒成功 也沒失敗

if (self.status === 'pending') );

self.onrejectedcallbacks.push(function () );})}

return promise2;

}// mjs

module.exports = promise

到此基本完成promise的基本功能,但還有一些方法沒有實現,比如race ,all,也沒有實現同時呼叫reject和resolve的問題,後續有時間再處理。有問題請指正

ES6非同步解決方案promise原理及簡單實現

promise是es6規範中定義的一種非同步解決方案,它可以在非同步函式處理流程中分離執行 和處理結果,還能夠新增處理成功 失敗後的鉤子函式,下面是乙個簡單案例 new promise funcion resolve,reject 2000 then msg 上述 可以看到,首先是new乙個prom...

js 非同步解決方案

js的非同步請求歷來被詬病,但是社群和規範一直也在努力,這裡簡單說下這些變化。嚴格地說ajax屬於與伺服器交換資料的api,與非同步並不完全相同。但對於早期的前端來說,非同步的操作基本都是與ajax交涉的過程。可以看出這個物件具有濃濃的物件導向的風格,沒有函式式編輯的優雅。目前作為xhr的替代api...

js async await 終極非同步解決方案

閱讀目錄 既然有了promise 為什麼還要有async await 當然是promise 也不是完美的非同步解決方案,而 async await 的寫法看起來更加簡單且容易理解。回到目錄 promise 物件用於表示乙個非同步操作的最終狀態 完成或失敗 以及其返回的值。promise物件是由關鍵字...