await-to-js代替try..catch..捕获异常

在开发中我们经常使用async和await关键词解决异步任务，但是不能捕获错误信息,解决 async await 发请求，处理异常时候多出 try catch 代码块问题

使用 try，catch捕获错误信息

import request from '@/utils/request'
export default {
  name: 'HomePage',
  async created () {
    try {
      const res = await request({ url: 'v1_0/channels2' })
      console.log('成功', res.data)
    } catch (e) {
      console.log('失败', e.message)
    }
  }
}

安装

npm i await-to-js --save 

使用 await-to-js捕获错误信息

import request from '@/utils/request'
import to from 'await-to-js'
export default {
  name: 'HomePage',
  async created () {
    const [err, res] = await to(request({ url: 'v1_0/channels' }))
    if (err) console.log('失败', err.message)
    else console.log('成功', res.data)
  }
}

优化await-to-js的使用(解决每次使用时都需导入await-to-js库)

import axios from 'axios'
import store from '@/store'
import router from '@/router'
import to from 'await-to-js'   // 导入 await-to-js
 
// 新建axios实例
const instance = axios.create({
  baseURL: 'http://geek.itheima.net/',
  timeout: 5000
})
 
// 请求拦截器
instance.interceptors.request.use(config => {
  const token = store.state.user.token
  if (token) config.headers.Authorization = `Bearer ${token}`
  return config
}, err => Promise.reject(err))
 
// 响应拦截器
instance.interceptors.response.use(res => res, err => {
  if (err.response && err.response.status === 401) {
    // token 失效
    store.commit('user/setToken')
    router.push('/login?returnUrl=' + encodeURIComponent(router.currentRoute.fullPath))
  }
  return Promise.reject(err)
})
 
// 导出一个新 axios 实例调用接口的函数，返回值promise
export default ({ url, method = 'get', params, data, headers }) => {
  const promise = instance({ url, method, params, data, headers })
  return to(promise)    // 使用 await-to-js
}