axios create(config)
a.根据指定配置创建一个新的 axios,也就是每个新 axios都有自己的配置
b.新 axios只是没有取消请求和批量发请求的方法,其它所有语法都是一政的
c.为什么要设计这个语法?
需求:项目中有部分接口需要的配置与另一部分接口需要的配置不太一样,如何处理
解决:创建2个新axios,每个都有自己特有的配置,分别应用到不同变求的接口请求中
那么问题来了,直接使用axios就可以发送请求了,我为什么还要再创建axios:
假如同一个项目,你要从不同的url地址来请求接口怎么办?
url地址1:http://localhost:3000
url地址2:http://localhost:3002
url地址3:http://localhost:3003
这个时候你创建多个不同的axios,是不是就可以轻松解决。
import axios from 'axios';
let baseURL= '';
if(process.env.NODE_ENV=='development'){
baseURL = ''
}else{
baseURL = ''
}
const $http = axios.create({
baseURL,
})
// create 是axios自带的方法
//$http拥有axios的get和post方法
// 添加请求拦截器,在请求头中加token
$http.interceptors.request.use(
config => {
// console.log(this.$store.state.user.Authorization);
if (sessionStorage.getItem('Authorization')) {
config.headers.token = sessionStorage.getItem('Authorization');
}
// if (this.$store.state.user.Authorization) {//去vuex全局作用域找
// config.headers.token = store.state.user.Authorization;
// }
return config;
},
error => {
return Promise.reject(error);
});
//在 response 拦截器实现
$http.interceptors.response.use(
res => {
const status = res.data.code;
//如果是未登录
if(status==401 || status=="401"){
app.$alert('登录已超时,请重新登录', '提示', {
confirmButtonText: '确定',
type:'warning',
closeOnClickModal:false,
callback: action => {
app.$router.push('/login');
return;
}
});
}
// if(status=='10010'){
// app.$router.push('/login');
// //window.location.href="http://localhost:8080";
// }
return res;
}, error => {
return Promise.reject(error);
});
export const get = (url,params)=>{
params = params || {};
return new Promise((resolve,reject)=>{
// axiso 自带 get 和 post 方法
$http.get(url,{
params,
}).then(res=>{
resolve(res.data);
if(res.data.code==200){
}else{
// alert(res.data.msg)
}
}).catch(error=>{
alert('网络异常!');
})
})
}
export const post = (url,params)=>{
params = params || {};
return new Promise((resolve,reject)=>{
$http.post(url,params).then(res=>{
if(res.data.status===0){
resolve(res.data);
}else{
alert(res.data.msg);
}
}).catch(error=>{
alert('网络异常');
})
})
}