关于前端: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
}

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

结语

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