优化try+catch

在调用接口的时候优化try…catch…

try…catch…只能捕获同步任务的错误信息
.catch…只能捕获异步promise的reject（）的错误信息
因为await 只能默认取代then函数, 只能拿到then的结果，如果await后面的异步请求报错需要用到try…catch

如果不想使用try…catch语句可以这样做，封装一个方法

export function to(pA) { // axios()在原地的Promise对象
  const pB = pA.then(res => { // 接收网络请求成功/失败的结果
    return [null, res]
  }).catch(err => {
    return [err, null] // 会返回给pB的then使用(pA的错误信息中转下去)
  })
  return pB // Promise对象返回到逻辑页面等待接收-上面return的数组
}

api接口中使用

export const loginAPI = (data) => {
  const pA = request({
    url: '/sys/login',
    method: 'POST',
    data
  })
  const pB = to(pA)
  return pB // 返回到vue文件逻辑页面处
}

vue页面使用

const [err, res] = await loginAPI(value)
    // 我们只需要token, 保存到上面的vuex中
    if (!err) commit('SET_TOKEN', res.data)
    // 逻辑页面还在接收数组, 外面写成功/失败的逻辑, 所以这里要把数组返回出去
    // return到actions调用的地方(login/index.vue)
    return [err, res]