如何使用async?await處理錯誤

這篇文章主要介紹“如何使用async await處理錯誤”，在日常操作中，相信很多人在如何使用async await處理錯誤問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”如何使用async await處理錯誤”的疑惑有所幫助！接下來，請跟著小編一起來學(xué)習(xí)吧！

Promise封裝請求

大家平時如果使用Promise封裝請求，那么當(dāng)你使用這個請求函數(shù)的時候是這樣的：

// 封裝請求函數(shù)
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
  })
}

可以看到，當(dāng)你的請求成功時，會調(diào)用then方法，當(dāng)你的請求失敗時會調(diào)用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這個錯誤回調(diào)來保證請求錯誤后該做什么操作，但是async/await該如何捕獲錯誤呢？

await-to-js

其實已經(jīng)有一個庫await-to-js已經(jīng)幫我們做了這件事，我們可以看看它是怎么做的，它的源碼只有短短十幾行，我們應(yīng)該讀讀它的源碼，學(xué)學(xué)它的思想

源碼很簡單

/**
 * @param { Promise } 傳進去的請求函數(shù)
 * @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

源碼總結(jié)：to函數(shù)返回一個Promise且值是一個數(shù)組，數(shù)組之中有兩個元素，如果索引為0的元素不為空值，說明該請求報錯，如果索引0的元素為空值說明該請求沒有報錯，也就是成功。

使用很簡單

我們該怎么去使用這個to函數(shù)呢？其實很簡單，還是剛剛的例子

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
}

到此，關(guān)于“如何使用async await處理錯誤”的學(xué)習(xí)就結(jié)束了，希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學(xué)習(xí)，快去試試吧！若想繼續(xù)學(xué)習(xí)更多相關(guān)知識，請繼續(xù)關(guān)注億速云網(wǎng)站，小編會繼續(xù)努力為大家?guī)砀鄬嵱玫奈恼拢?/p>