vue axios简单配置
程序员文章站
2022-07-02 16:54:21
...
1.项目目录下引入npm install axios -S
2.vue的入口文件main.js里面
//axios全局配置
const Axios = axios.create({
//请求接口
baseURL:"199.166.1.1:8080/api",
//超时设置
timeout:8000,
//请求头设置
headers: {
"accept": "application/json",
'Content-Type': 'application/json',
}
})
// 在发送请求之前做些什么("请求拦截器")
instance.interceptors.request.use(config => {
//假设接口需要对接token,可以用store保存token,在拦截器中设置到header中
//store需要安装、引入
if(store.state.Config.token){
config.headers.common['Authorization'] = store.state.Config.token
}else{
config.headers.common['Authorization'] = store.state.Config.machine
}
return config;
}, error => {
// 对请求错误做些什么
//console.log(error)
});
//respone拦截器==>对响应做处理
instance.interceptors.response.use(
response => { //成功请求到数据
if(response.data.statusCode==200){
return response.data.data
}else{
return "请求错误"
}
},
error => { //响应错误处理
if (error.code === 'ECONNABORTED' && error.message.indexOf('timeout') !== -1) {
let originalRequest = error.config;
return "error"
//return instance.request(originalRequest);//例如再重复请求一次
}
}
);
//将axios挂载到Vue的原型上
Vue.prototype.$http = instance
3.使用时:
//vue的生命周期
created(){
let that = this;
that.$http.get("url?name="+"gaofei").then(data=>{
console.log(data)
})
}
转载于:https://www.jianshu.com/p/c0877da93d28
上一篇: vue中axios的简单使用
下一篇: vue-axios简单使用