前言

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

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}

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

结语

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