在这里插入代码片
## axios封装成一个函数 兼容get 和 post 请求
常规:
axios({
url:'http//----'
method:'get',
params:{}
})
axios({
url:'http//----',
mathods:'post',
data:{}
})
//封装后的代码
function request(url,method,redata){
return instance({
url,
method,
[method.toLowerCase()==='get'? 'params' : 'data']:redata
})
}
import axios from 'axios'
import store from '@/store'
import { Message } from 'element-ui' // MessageBox,
import router from '@/router'
// import { getToken } from '@/utils/auth'
// create an axios instance
const service = axios.create({
baseURL: process.env.VUE_APP_BASE_API, // url = base url + request url
// withCredentials: true, // send cookies when cross-domain requests
timeout: 5000 // request timeout
})
// request interceptor
service.interceptors.request.use(config => {
if (store.getters.token) {
config.headers['Authorization'] = `Bearer ${store.getters.token}`
}
return config
}, error => {
return Promise.reject(error)
}
)
// // response interceptor
service.interceptors.response.use(response => {
// 从axios的data中解构出来必要的字段
const { success, message, data } = response.data
// 如果success为true,直接返回data即可
if (success) {
return data
} else {
// 如果success为false 业务出错,直接触发reject 组件调用接口可通过try/catch捕获错误
return Promise.reject(new Error(message))
}
}, error => {
console.dir(error) // for debug
if (error.response && error.response.status === 401) {
if (router.currentRoute.path === '/login') return
// 登出action 删除token和用户信息
store.dispatch('user/logout')
console.log(999, router)
router.replace(`/login?redirect=${router.currentRoute.path}`)
}
Message({
message: error.response.data.message,
type: 'error',
duration: 5 * 1000
})
return Promise.reject(error) // 返回执行错误 让当前的执行链进入 catch
})
export default service