关于前端:asyncawait-你是会用但是你知道怎么处理错误吗

前言

大家好，我是林三心，用最通俗易懂的话讲最难的知识点 是我的座右铭，根底是进阶的前提 是我的初心

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 该如何捕捉谬误呢？

async-to-js

其实曾经有一个库 async-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
}

所以说，偶然看看一些库的源码，还是能学到货色的！！！

结语

我是林三心，一个热心的前端菜鸟程序员。如果你上进，喜爱前端，想学习前端，那咱们能够交朋友，一起摸鱼哈哈，摸鱼群，加我请备注【思否】