Async/Await 你是会用，但是你知道怎么处理错误吗？

前言

大家好，我是林三心，用最通俗易懂的话讲最难的知识点是我的座右铭，基础是进阶的前提是我的初心29f28资讯网——每日最新资讯28at.com

Promise封装请求

大家平时如果使用Promise封装请求，那么当你使用这个请求函数的时候是这样的：29f28资讯网——每日最新资讯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方法。29f28资讯网——每日最新资讯28at.com

async/await

Promise的出现解决了很多问题，但是如果请求多了且有顺序要求的话，难免又会出现嵌套的问题，可读性较差，比如：29f28资讯网——每日最新资讯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的话可以改写成：29f28资讯网——每日最新资讯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该如何捕获错误呢？29f28资讯网——每日最新资讯28at.com

await-to-js

其实已经有一个库await-to-js已经帮我们做了这件事，我们可以看看它是怎么做的，它的源码只有短短十几行，我们应该读读它的源码，学学它的思想29f28资讯网——每日最新资讯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的元素为空值说明该请求没有报错，也就是成功。29f28资讯网——每日最新资讯28at.com

使用很简单

我们该怎么去使用这个to函数呢？其实很简单，还是刚刚的例子29f28资讯网——每日最新资讯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}

所以说，偶尔看看一些库的源码，还是能学到东西的！！！29f28资讯网——每日最新资讯28at.com

本文链接：http://www.28at.com/showinfo-26-82043-0.htmlAsync/Await 你是会用，但是你知道怎么处理错误吗？

声明：本网页内容旨在传播知识，若有侵权等问题请及时与本网联系，我们将在第一时间删除处理。邮件：2376512515@qq.com

上一篇： 一日一技：Setup.py里面的两个小技巧

下一篇： 阿里云卷到海外 核心云产品全线降价 23%！