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/awa源码交易平台it该如何捕获错误呢？

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函数返回一个Promi数组排序se且值是一个数组，数组之中有两个元素，如果索引为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
}

所以说，偶尔看看一些库的源码，还是能学到东西的！！！

结语

我是林三心，一个热心的前端菜鸟程序员。如果你上进，喜欢前端，想学习前端程序员是做什么的，那咱们可以交朋友，一源码编辑器下载起摸鱼哈哈，摸鱼群，点这个 –>摸鱼沸点