資訊專欄INFORMATION COLUMN
摘要：順序并發(fā)請求使用的時候，代碼執(zhí)行的順序很容易出錯，比如我們要同時發(fā)起兩個請求，可能會寫出下面的代碼在上面的代碼中，我們認為，會并行執(zhí)行，實際上并不會。會等待執(zhí)行完之后才開始請求。
async 順序 并發(fā)請求
使用async的時候，代碼執(zhí)行的順序很容易出錯，比如我們要同時發(fā)起兩個請求，可能會寫出下面的代碼
function fetchName () {
return new Promise((resolve, reject) => {
setTimeout(() => {
resolve("lujs")
}, 3000)
})
}
function fetchAvatar () {
return new Promise((resolve, reject) => {
setTimeout(() => {
resolve("https://avatars3.githubusercontent.com/u/16317354?s=88&v=4")
}, 4000)
})
}
async fetchUser () {
const name = await fetchName()
const avatar = await fetchAvatar()
return {
name,
avatar
}
}
(async function () {
console.time("should be 7s ")
const user = await fetchUser()
console.log(user)
console.timeEnd("should be 3s ")
})()
在上面的代碼中，我們認為fetchName，fetchAvatar會并行執(zhí)行，實際上并不會。fetchAvatar會等待fetchName執(zhí)行完之后才開始請求。fetchUser函數(shù)的執(zhí)行時間不是三秒而是7秒
要并行請求的話需要像下面這樣寫，fetchUserParallel的執(zhí)行時間為4秒
async function fetchUserParallel () {
const namePromise = fetchName()
const avatarPromise = fetchAvatar()
return {
name: await namePromise,
avatar: await avatarPromise
}
}
(async function () {
console.time("should be 3s, but time is ")
const user = await fetchUser()
console.log(user)
console.timeEnd("should be 3s, but time is ")
console.time("should be 3s : ")
const user2 = await fetchUserParallel()
console.log(user2)
console.timeEnd("should be 3s : ")
})()
使用Promise.all來并發(fā)請求
function fetchList (id) {
return new Promise((resolve, reject) => {
setTimeout(() => {
resolve(`id is : ${id}`)
}, 5000)
})
}
async function getList () {
const ary = [1, 2, 3, 4]
const list = Promise.all(
ary.map(
(id) => fetchList(id)))
return await list
}
(async function () {
// 使用promise并發(fā)請求
console.time("should be 3s ")
const list = await getList()
console.log(list)
console.timeEnd("should be 3s ")
})()
錯誤獲取
使用try...catch
try {
const user3 = await fetchUser(true)
} catch (err) {
console.error("user3 error:", err)
}
包裝promise，使其返回統(tǒng)一的格式的代碼
參考文章
/**
* 包裝promise, 使其返回統(tǒng)一的錯誤格式
* @param {Promise} promise
*/
function to (promise) {
return promise.then(res => [null, res]).catch(err => [err])
}
.
.
.
const [err, res] = await to(fetchUser(true))
if (err) {
console.error("touser err:", err)
}
繼續(xù)使用catch
// 因為async 返回的promise對象，所以可以使用catch
const user4 = await fetchUser(true).catch(err => {
console.error("user4 error:", err)
})
有興趣的可以用弄得運行一下代碼，
在線例子
測試代碼
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/95934.html
摘要：在中，表示抽象的非阻塞異步執(zhí)行。在完成之后安排代碼的唯一方式是通過方法綁定回調(diào)函數(shù)。下圖描述了該示例的計算過程方法中綁定的回調(diào)函數(shù)只有當成功的時候才會調(diào)用。為了處理失敗的，需要通過綁定另一個回調(diào)函數(shù)。 介紹 ES7中，async/await 語法使異步promise的協(xié)調(diào)變得很簡單。如果你需要以特定順序異步獲取來自多個數(shù)據(jù)庫或API的數(shù)據(jù)，可以使用雜亂的promise或回調(diào)函數(shù)。asy...
摘要：的和我們通過的原型方法拿到我們的返回值輸出我延遲了毫秒后輸出的輸出下列的值我延遲了毫秒后輸出的。有人說，我不想耦合性這么高，想先執(zhí)行函數(shù)再執(zhí)行，但不想用上面那種寫法，可以嗎，答案是當然可以。 此文只介紹Async/Await與Promise基礎(chǔ)知識與實際用到注意的問題，將通過很多代碼實例進行說明，兩個實例代碼是setDelay和setDelaySecond。 tips:本文系原創(chuàng)轉(zhuǎn)自...
摘要：前言異步編程模式在前端開發(fā)過程中，顯得越來越重要。隨著新標準的到來，處理異步數(shù)據(jù)流又有了新的方案。接下來我們介紹這兩種處理異步編程的方案。仍在繼續(xù)執(zhí)行，但執(zhí)行結(jié)果將被丟棄。使得異步代碼看起來像同步代碼，再也沒有回調(diào)函數(shù)。 前言 異步編程模式在前端開發(fā)過程中，顯得越來越重要。從最開始的XHR到封裝后的Ajax都在試圖解決異步編程過程中的問題。隨著ES6新標準的到來，處理異步數(shù)據(jù)流又有了新...
摘要：前言異步編程模式在前端開發(fā)過程中，顯得越來越重要。隨著新標準的到來，處理異步數(shù)據(jù)流又有了新的方案。接下來我們介紹這兩種處理異步編程的方案。仍在繼續(xù)執(zhí)行，但執(zhí)行結(jié)果將被丟棄。使得異步代碼看起來像同步代碼，再也沒有回調(diào)函數(shù)。 前言 異步編程模式在前端開發(fā)過程中，顯得越來越重要。從最開始的XHR到封裝后的Ajax都在試圖解決異步編程過程中的問題。隨著ES6新標準的到來，處理異步數(shù)據(jù)流又有了新...
摘要：前言異步編程模式在前端開發(fā)過程中，顯得越來越重要。隨著新標準的到來，處理異步數(shù)據(jù)流又有了新的方案。接下來我們介紹這兩種處理異步編程的方案。仍在繼續(xù)執(zhí)行，但執(zhí)行結(jié)果將被丟棄。使得異步代碼看起來像同步代碼，再也沒有回調(diào)函數(shù)。 前言 異步編程模式在前端開發(fā)過程中，顯得越來越重要。從最開始的XHR到封裝后的Ajax都在試圖解決異步編程過程中的問題。隨著ES6新標準的到來，處理異步數(shù)據(jù)流又有了新...
閱讀 667·2019-08-30 15:44
閱讀 1388·2019-08-30 11:02
閱讀 2996·2019-08-29 18:42
閱讀 3517·2019-08-29 16:16
閱讀 1725·2019-08-26 13:55
閱讀 1779·2019-08-26 13:45
閱讀 2393·2019-08-26 11:43
閱讀 3257·2019-08-26 10:32
