在开发中我们经常使用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
}