await?Streaking解決原理示例詳解
前言
我們現(xiàn)在在請求接口的過程中，已經(jīng)習(xí)慣了async/await的寫法，已經(jīng)逐漸的代替了promise的寫法，但我們在開發(fā)的過程中，都是混用的狀態(tài)，當(dāng)你體驗(yàn)async/await過的好，就會愛不釋手。
async/await我們要拒絕 Streaking，啥叫 Streaking，我們看個代碼。
const foo = async () => {
const response = await axios.get('https://www.baidu.com')
console.log(response);
}
foo()
一旦失敗我們控制臺就會出現(xiàn)報錯，一個接口就是一個紅色的。
此時，你想起我們還有try...catch...，可你知道嗎？try...catch...并不是萬能的，有時候他捕獲不到異步的錯誤，再有就是每個async/await你都加一個try...catch...，一個項(xiàng)目中，并可能只出現(xiàn)一個借口調(diào)用的地方吧，每個都加，就請問你累不累??。
const foo = async () => {
try{
const response = await axios.get('https://www.baidu.com')
console.log(response);
} catch (error) {
console.log(error)
}
}
foo()
優(yōu)化async/await
經(jīng)過上面一說，那我還不如用回promise。當(dāng)你看到一長串的.then的時候你好維護(hù)嗎？不煩嗎？
那你說我們應(yīng)該怎么辦？我們需要從源頭入手。
我們現(xiàn)在都會先基于axios/fetch進(jìn)行二次封裝對不？有時候我們還會三次封裝對吧？這個封裝就是我們的源頭。
我們先看個promise的封裝。
// 封裝
const request = (option = {}) =>{
return new Promise((resolve, reject) => {
axios.get(option.url).then( response => {
resolve(response)
}).catch( error => {
reject(error)
});
})
}
// 調(diào)用
const foo = async () => {
const response = await request({
url: './demo.json'
})
console.log(response);
}
foo()
常見的封裝就長上面這樣，這樣除了方便傳參數(shù)，和沒封有啥區(qū)別？
我的答案是沒區(qū)別，那我們應(yīng)該怎么來封裝呢？
看下面的代碼：
// 封裝
const request = async (option = {}) => {
const result = [null, null]
await new Promise((resolve, reject) => {
axios.get(option.url).then( response => {
result[0] = response
resolve(response)
}).catch( error => {
result[1] = error
resolve(error)
});
})
return result
}
// 調(diào)用
const foo = async () => {
const [response, error] = await request({
url: './demo.json'
})
console.log(response, error);
}
foo()
此時此刻，看到上面的封裝，有朋友就有疑問了，那么怎么判斷呢？
我們可以通過if()來判斷呀，數(shù)組第一個為成功，第二個為失敗，默認(rèn)值都是null，我們只需要判斷不等于null就可以了呀。像下面這樣。
// 判斷請求成功
if(response !== null){
console.log('請求成功內(nèi)容：-----');
console.log(response.data.data);
return
}
失敗的話判斷，同理。
// 判斷請求失敗
if(error !== null){
console.log('請求失敗內(nèi)容：-----');
console.log(error);
return
}
但我更喜歡像下面這樣寫。
// 調(diào)用
const foo = async () => {
const [response, error] = await request({
url: './demo1.json'
})
// 判斷請求成功
if(response !== null){
console.log('請求成功內(nèi)容：-----');
console.log(response.data.data);
return
}
// 判斷請求失敗
console.log('請求失敗內(nèi)容：-----');
console.log(error);
...
}
demo.json
下面為demo.json的內(nèi)容。
{
"code": 200,
"data": {
"name": "桃小瑞"
}
}
關(guān)于Promise
關(guān)于Promise的詳細(xì)說明及原理，以及手寫一款Promise，感興趣的朋友可以看我的這篇文章Promise詳解-手寫Promise，實(shí)現(xiàn)一款自己的簡易Promise。
感興趣了解Promise的核心之一的鏈?zhǔn)秸{(diào)用的朋友可以看我這篇文章Promise 鏈?zhǔn)秸{(diào)用原理-精簡20行代碼。
關(guān)于async/await
關(guān)于async/await我們會單獨(dú)拿一篇文章來說，感興趣的朋友可以關(guān)注我哦，因?yàn)楫?dāng)我發(fā)布后你可以更快的看到哦。
總結(jié)
以上就是我對async/await的一個簡單封裝，更多關(guān)于await Streaking原理的資料請關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
這篇文章主要介紹了js+HTML5實(shí)現(xiàn)視頻截圖的方法,涉及javascript操作html5元素實(shí)現(xiàn)多媒體文件截圖的相關(guān)技巧,需要的朋友可以參考下2015-06-06
element-ui 時間選擇器限制范圍的實(shí)現(xiàn)（隨動）
這篇文章主要介紹了element-ui 時間選擇器限制范圍（隨動）,小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-01-01
這篇文章主要介紹了JS實(shí)現(xiàn)仿QQ效果的三級豎向菜單,以實(shí)例形式分析了JavaScript遍歷頁面元素及動態(tài)改變頁面css樣式的技巧,需要的朋友可以參考下2015-09-09
js循環(huán)map 獲取所有的key和value的實(shí)現(xiàn)代碼(json)
這篇文章主要介紹了js循環(huán)map 獲取所有的key和value的實(shí)現(xiàn)代碼(json),需要的朋友可以參考下2018-05-05
JS跨域總結(jié)，主要是解決js中跨域訪問的我問題2012-08-08
本文通過2個示例來給大家分享了下原生javascript結(jié)合ajax實(shí)現(xiàn)數(shù)據(jù)請求的方法以及原理，非常的簡單實(shí)用，有需要的小伙伴可以參考下2016-04-04
淺談nodeName,nodeValue,nodeType,typeof 的區(qū)別
本文主要簡單介紹了nodeName,nodeValue,nodeType,typeof 的區(qū)別,算是知識點(diǎn)的一個小總結(jié)，希望對小伙伴們有所幫助2015-01-01
在本篇文章里小編給大家整理了一篇關(guān)于js數(shù)組forEach實(shí)例用法詳解內(nèi)容，有需要的朋友們可以跟著學(xué)習(xí)參考下。2021-10-10
這篇文章主要介紹了JavaScript自動生成24小時時間區(qū)間，就以時間區(qū)間為字符串展開主題香瓜內(nèi)容，需要的朋友可以參考一下2022-06-06
JS如何使用正則表達(dá)式(match)截取括號中的文字和數(shù)字
正則表達(dá)式是一種用來匹配文本模式的工具,這篇文章主要給大家介紹了關(guān)于JS如何使用正則表達(dá)式(match)截取括號中文字和數(shù)字的相關(guān)資料,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-10-10