js 非同步解決方案

2022-02-01 23:54:16 字數 1671 閱讀 5218

js的非同步請求歷來被詬病,但是社群和規範一直也在努力,這裡簡單說下這些變化。

嚴格地說ajax屬於與伺服器交換資料的api,與非同步並不完全相同。但對於早期的前端來說,非同步的操作基本都是與ajax交涉的過程。

可以看出這個物件具有濃濃的物件導向的風格,沒有函式式編輯的優雅。目前作為xhr的替代api——fetch,則改正了這一股風氣。

這玩意已經退出歷史舞台了,我差不多已經忘記了。但是17年去頭條面試還居然問我$deffered是怎麼實現的,要寫**。我表示很崩潰。

promise 是es6的規範,它的規則如下:

promise的引數是乙個函式,這個函式執行時會被注入兩個引數,resolve和reject,這兩個函式會改變promise物件的狀態,狀態發生變化時則會執行相應的**

具體有三個狀態:

狀態轉換規則如下:

所以對於乙個連續三次的非同步操作,它的**可能如下:

function resolvenumafter2s(x), 500)

})}resolvenumafter2s(10)

.then(x => )

.then(x => )

.then(x => )

promise 隱藏了中間一些抽象的處理,resolve,reject導致的狀態變化以及它們的實現,then,catch的繫結都隱藏了,所以理解起來會有些困難,如果自己用js寫乙個類似的實現,則能容易理解它的功能,下面是乙個小意思:

const mypromise = function(f)

mypromise.prototype = object.assign(mypromise.prototype, ,

_reject: function (err) ,

then: function (f) ,

catch: function (f)

})function resolveafter2s(x), 2000)

})}var res = resolveafter2s(10).then(x=>).catch(err => )

作為es7的終級非同步解決方案,async/await的規則如下:

對於乙個簡單的例子,大約很難體會它到底有什麼用, 比如:

function resolvenumafter2s(x), 2000)

})}async function getnum()

getnum().then(x=>)

但考慮以下場景,就會發現其方便之處:

function resolvenumafter2s(x), 500)

})}async function getnum()

getnum().then(x=>)

js非同步提交form表單的解決方案

1.定義非同步提交表單的方法 通用方法 非同步提交form表單 param options 注意 後台接收引數要解碼否則中文會導致亂碼 如 urldecoder.decode param,utf 8 應用場景 需要用在form 的 onsubmit事件當中,並且確保方法最後恆久返回false ret...

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

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

Promise js非同步載入解決方案

範例 var p new promise function resolve,reject 2000 resolve data 函式的作用,將promise物件的狀態從 未完成 變成 成功 reject data 函式的作用是,在非同步操作失敗時呼叫,並將非同步操作報出的錯誤,作為引數傳遞出去,實際就...