Async/Await 你是會用，但是你知道怎么處理錯誤嗎？
作者：林三心不學挖掘機
to函數返回一個Promise且值是一個數組，數組之中有兩個元素，如果索引為0的元素不為空值，說明該請求報錯，如果索引0的元素為空值說明該請求沒有報錯，也就是成功。
前言
大家好，我是林三心，用最通俗易懂的話講最難的知識點是我的座右銘，基礎是進階的前提是我的初心
Promise封裝請求
大家平時如果使用Promise封裝請求，那么當你使用這個請求函數的時候是這樣的：
// 封裝請求函數
const request = (url, params) => {
return new Promise((resolve, reject) => {
// ...do something
})
}
// 使用時
const handleLogin = () => {
request(
'/basic/login',
{
usename: 'sunshine',
password: '123456'
}
).then(res => {
// success do something
}).catch(err => {
// fail do something
})
}
可以看到，當你的請求成功時，會調用then方法，當你的請求失敗時會調用catch方法。
async/await
Promise的出現(xiàn)解決了很多問題，但是如果請求多了且有順序要求的話，難免又會出現(xiàn)嵌套的問題，可讀性較差，比如：
const handleLogin = () => {
request(
'/basic/login',
{
usename: 'sunshine',
password: '123456'
}
).then(res => {
// 登錄成功后獲取用戶信息
request(
'/basic/getuserinfo',
res.id
).then(info => {
this.userInfo = info
}).catch()
}).catch(err => {
// fail do something
})
所以這個時候async/await出現(xiàn)了，他的作用是：用同步的方式執(zhí)行異步操作，上面的代碼使用async/await的話可以改寫成：
const handleLogin = async () => {
const res = await request('/basic/login', {
usename: 'sunshine',
password: '123456'
})
const info = await request('/basic/getuserinfo', {
id: res.id
})
this.userInfo = info
}
這樣的話代碼的可讀性比較高，而不會出現(xiàn)剛剛的嵌套問題，但是現(xiàn)在又有一個問題了，Promise有catch這個錯誤回調來保證請求錯誤后該做什么操作，但是async/await該如何捕獲錯誤呢?
async-to-js
其實已經有一個庫async-to-js已經幫我們做了這件事，我們可以看看它是怎么做的，它的源碼只有短短十幾行，我們應該讀讀它的源碼，學學它的思想
源碼很簡單
/**
* @param { Promise } 傳進去的請求函數
* @param { Object= } errorExt - 拓展錯誤對象
* @return { Promise } 返回一個Promise
*/
export function to(
promise,
errorExt
) {
return promise
.then(data => [null, data])
.catch(err => {
if (errorExt) {
const parsedError = Object.assign({}, err, errorExt)
return [parsedError, undefined]
}
return [err, undefined]
})
}
export default to
源碼總結：to函數返回一個Promise且值是一個數組，數組之中有兩個元素，如果索引為0的元素不為空值，說明該請求報錯，如果索引0的元素為空值說明該請求沒有報錯，也就是成功。
使用很簡單
我們該怎么去使用這個to函數呢?其實很簡單，還是剛剛的例子
const handleLogin = async () => {
const [resErr, res] = await to(request('/basic/login', {
usename: 'sunshine',
password: '123456'
}))
if (resErr) {
// fail do somthing
return
}
const [userErr, info] = await to(request('/basic/getuserinfo', {
id: res.id
}))
if (userErr) {
// fail do somthing
return
}
this.userInfo = info
}
所以說，偶爾看看一些庫的源碼，還是能學到東西的!!!
責任編輯：武曉燕
來源：
前端之神
