vue axios 封装
1、在request.js文件 引入axios
import axios from 'axios';
2、创建axios实例
const service = axios.create({
baseURL: '', // api 的 地址
timeout: 5000 // 请求超时时间
})
3、reqreuest拦截器 所带参数给后台
service.interceptors.request.use(
config => {
return config
},
error => {
// Do something with request error
console.log(error) // for debug
return Promise.reject(error)
}
)
4、response 拦截器 后台返回数据修改
service.interceptors.response.use(
response => {
const res = response.data
if (res.code !== 200) {
message.warning(res.msg);
const err = 'error'
return Promise.reject(err)
} else {
return res.data
}
},
error => {
if (error.response.status === 401) {
//清除登录
} else{
message.warning(error.response.data.message);
}
console.log(error.response) // for debug
return Promise.reject(error)
}
)
5、调用 /utils/request 封装的文件位置
import request from '@/utils/request';
export function 函数名(params ={}){
return request({
url:路径,
method: 请求方式,
params: params
})
}
6、全部代码
// 创建axios实例
const service = axios.create({
baseURL: '', // api 的 地址
timeout: 5000 // 请求超时时间
})
// reqreuest拦截器
service.interceptors.request.use(
config => {
return config
},
error => {
// Do something with request error
console.log(error) // for debug
return Promise.reject(error)
}
)
// response 拦截器
service.interceptors.response.use(
response => {
const res = response.data
if (res.code !== 200) {
message.warning(res.msg);
const err = 'error'
return Promise.reject(err)
} else {
return res.data
}
},
error => {
if (error.response.status === 401) {
//清除登录
} else{
message.warning(error.response.data.message);
}
console.log(error.response) // for debug
return Promise.reject(error)
}
)
export default service