使用async?await處理錯誤方法示例

 更新時間:2022年07月04日 16:48:23   作者:Sunshine_Lin  
這篇文章主要為大家介紹了使用async?await處理錯誤的方法示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪

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的出現解決了很多問題,但是如果請求多了且有順序要求的話,難免又會出現嵌套的問題,可讀性較差,比如:

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出現了,他的作用是:用同步的方式執行異步操作,上面的代碼使用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
}

這樣的話代碼的可讀性比較高,而不會出現剛剛的嵌套問題,但是現在又有一個問題了,Promise有catch這個錯誤回調來保證請求錯誤后該做什么操作,但是async/await該如何捕獲錯誤呢?

await-to-js

其實已經有一個庫await-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
}

所以說,偶爾看看一些庫的源碼,還是能學到東西的?。?!

以上就是使用async await處理錯誤方法示例的詳細內容,更多關于async await處理錯誤的資料請關注腳本之家其它相關文章!

相關文章

  • 微信小程序 頁面跳轉和數據傳遞實例詳解

    微信小程序 頁面跳轉和數據傳遞實例詳解

    這篇文章主要介紹了微信小程序 頁面跳轉和數據傳遞實例詳解的相關資料,這里附有實例代碼幫助到家學習理解,需要的朋友可以參考下
    2017-01-01
  • 微信小程序 wxapp導航 navigator詳解

    微信小程序 wxapp導航 navigator詳解

    這篇文章主要介紹了微信小程序 wxapp導航 navigator詳解的相關資料,并附簡單實例代碼,需要的朋友可以參考下
    2016-10-10
  • JS精髓原型鏈繼承及構造函數繼承問題糾正

    JS精髓原型鏈繼承及構造函數繼承問題糾正

    這篇文章主要為大家介紹了JS精髓原型鏈繼承及構造函數繼承問題糾正,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪
    2022-06-06
  • 移動開發之自適應手機屏幕寬度

    移動開發之自適應手機屏幕寬度

    這篇文章主要介紹了移動開發之自適應手機屏幕寬度的相關資料,網上關于這方面的文章有很多,重復的東西本文不再贅述,僅提供思路,并解釋一些其他文章講述模糊的地方,需要的朋友可以參考下
    2016-11-11
  • 微信小程序 progress組件詳解及實例代碼

    微信小程序 progress組件詳解及實例代碼

    這篇文章主要介紹了微信小程序 progress組件詳解及實例代碼的相關資料,需要的朋友可以參考下
    2016-10-10
  • 微信小程序 獲取javascript 里的數據

    微信小程序 獲取javascript 里的數據

    這篇文章主要介紹了微信小程序 獲取javascript 里的數據的相關資料,這里通過實例來說明如何獲取javascript里的數據,希望能幫助到大家,需要的朋友可以參考下
    2017-08-08
  • JavaScript內置對象介紹

    JavaScript內置對象介紹

    這篇文章主要介紹了JavaScript內置對象,內置對象就是指?JS?語言自帶的一些對象,這些對象供開發者使用,并提供了一些常用的或是最基本而必要的功能,下面我們一起進入文章了解更多詳細內容
    2021-12-12
  • 微信小程序 loading 詳解及實例代碼

    微信小程序 loading 詳解及實例代碼

    這篇文章主要介紹了微信小程序 loading 詳解及實例代碼的相關資料,需要的朋友可以參考下
    2016-11-11
  • 微信小程序 跳轉方式總結

    微信小程序 跳轉方式總結

    這篇文章主要介紹了微信小程序 跳轉方式總結的相關資料,需要的朋友可以參考下
    2017-04-04
  • 詳解微信小程序 wx.uploadFile 的編碼坑

    詳解微信小程序 wx.uploadFile 的編碼坑

    編寫微信小程序時,用到 wx.uploadFile,用來上傳圖片+文本信息,本篇文章主要介紹了微信小程序 wx.uploadFile 的編碼坑,有興趣的可以了解一下。
    2017-01-01

最新評論

美丽人妻被按摩中出中文字幕