前言

大家好，我是林三心，用最通俗易懂的話講最難的知識點是我的座右銘，基礎是進階的前提是我的初心Hou28資訊網——每日最新資訊28at.com

Promise封裝請求

大家平時如果使用Promise封裝請求，那么當你使用這個請求函數的時候是這樣的：Hou28資訊網——每日最新資訊28at.com

// 封裝請求函數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方法。Hou28資訊網——每日最新資訊28at.com

async/await

Promise的出現解決了很多問題，但是如果請求多了且有順序要求的話，難免又會出現嵌套的問題，可讀性較差，比如：Hou28資訊網——每日最新資訊28at.com

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的話可以改寫成：Hou28資訊網——每日最新資訊28at.com

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該如何捕獲錯誤呢？Hou28資訊網——每日最新資訊28at.com

await-to-js

其實已經有一個庫await-to-js已經幫我們做了這件事，我們可以看看它是怎么做的，它的源碼只有短短十幾行，我們應該讀讀它的源碼，學學它的思想Hou28資訊網——每日最新資訊28at.com

源碼很簡單

/** * @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的元素為空值說明該請求沒有報錯，也就是成功。Hou28資訊網——每日最新資訊28at.com

使用很簡單

我們該怎么去使用這個to函數呢？其實很簡單，還是剛剛的例子Hou28資訊網——每日最新資訊28at.com

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}

所以說，偶爾看看一些庫的源碼，還是能學到東西的！！！Hou28資訊網——每日最新資訊28at.com

本文鏈接：http://www.www897cc.com/showinfo-26-82043-0.htmlAsync/Await 你是會用，但是你知道怎么處理錯誤嗎？

聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。郵件：2376512515@qq.com

上一篇： 一日一技：Setup.py里面的兩個小技巧

下一篇： 阿里云卷到海外 核心云產品全線降價 23%！