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