介绍
对 axios 做了二次封装,统一 axios 的配置
!!!!!!请求/响应拦截放在实例化之前!!!!!! !!!!!!请求/响应拦截放在实例化之前!!!!!! !!!!!!请求/响应拦截放在实例化之前!!!!!!
安装
使用 npm
npm install @mlz/axios
使用 yarn
yarn add @mlz/axios
默认 axios 配置
timeout: 5000;
withCredentials: true;
validateStatus: status => status >= 200 && status < 599;
实例化
实例化可以传入 baseUrl 和默认配置
import Http from 'mlz-axios'
const httpIns = new Http(baseUrl:string, config:AxiosRequestConfig)
静态方法
获取对应的实例
getInstances(key:string)
示例:
import Http from "mlz-axios";
Http.getInstances("https://www.example.com");
全局设置token与tokenType
setGlobalTokenConfig({
authorizationTypeKey?: string;
authorizationTokenKey?: string;
authorizationTypeValue?: number;
authorizationTokenValue?: string;
})
示例:
import Http from "mlz-axios";
Http.setGlobalTokenConfig({
authorizationTypeKey: 'authorization_type',
authorizationTokenKey: 'Authorization',
authorizationTypeValue: 1
authorizationTokenValue: 'token'
});
设置请求拦截器
setReqInterceptor (resolve?:(config:AxiosRequestConfig) => AxiosRequestConfig, reject?:(error:any) => void, url?:string)
设置全局请求拦截器
import Http from "mlz-axios";
Http.setReqInterceptor(
config => {
console.log(config);
},
err => {
console.log(err);
}
);
设置单个实例请求拦截器
Http.setReqInterceptor(
config => {
console.log("请求前config", config);
return config;
},
err => {
console.log("请求前err", err);
return Promise.reject(err);
},
"https://xxx.xxx.com"
);
设置响应拦截器
setResInterceptor (resolve?:(res:AxiosResponse) => AxiosResponse, reject?:(error) => any, url?:string)
设置全局响应拦截器
Http.setResInterceptor(
res => {
console.log("请求后res", res);
return res;
},
err => {
console.log("请求后err", err);
return Promise.reject(err);
}
);
设置单个实例响应拦截器
Http.setResInterceptor(
res => {
console.log("请求后res", res);
return res;
},
err => {
console.log("请求后err", err);
return Promise.reject(err);
},
"https://xxx.xxx.com"
);
实例方法
设置实例的 authorizationTokenToken 和 authorizationType
setInstanceTokenConfig({
authorizationTypeKey?: string;
authorizationTokenKey?: string;
authorizationTypeValue?: number;
authorizationTokenValue?: string;
})
示例:
import Http from "mlz-axios";
const httpIns = new Http('https://xxx.xxx.com')
httpIns.setInstanceTokenConfig({
authorizationTypeKey: 'authorization_type',
authorizationTokenKey: 'Authorization',
authorizationTypeValue: 1
authorizationTokenValue: 'token'
});
get(url[, config])
import Http from "mlz-axios";
const httpIns = new Http("https://www.example.com");
httpIns
.get("/user")
.then(function(response) {
// handle success
console.log(response);
})
.catch(function(error) {
// handle error
console.log(error);
})
.finally(function() {
// always executed
});
delete(url[, config])
import Http from "mlz-axios";
const httpIns = new Http("https://www.example.com");
httpIns
.delete("/user")
.then(function(response) {
// handle success
console.log(response);
})
.catch(function(error) {
// handle error
console.log(error);
})
.finally(function() {
// always executed
});
post(url[, data[, config]])
import Http from "mlz-axios";
const httpIns = new Http("https://www.example.com");
httpIns
.post("/user", {
firstName: "Fred",
lastName: "Flintstone"
})
.then(function(response) {
// handle success
console.log(response);
})
.catch(function(error) {
// handle error
console.log(error);
})
.finally(function() {
// always executed
});
put(url[, data[, config]])
import Http from "mlz-axios";
const httpIns = new Http("https://www.example.com");
httpIns
.put("/user", {
firstName: "Fred",
lastName: "Flintstone"
})
.then(function(response) {
// handle success
console.log(response);
})
.catch(function(error) {
// handle error
console.log(error);
})
.finally(function() {
// always executed
});
patch(url[, data[, config]])
import Http from "mlz-axios";
const httpIns = new Http("https://www.example.com");
httpIns
.patch("/user", {
firstName: "Fred",
lastName: "Flintstone"
})
.then(function(response) {
// handle success
console.log(response);
})
.catch(function(error) {
// handle error
console.log(error);
})
.finally(function() {
// always executed
});
例子
import Http from "@mlz/axios";
const token = localStorage.getItem('authorization')
const AUTHORIZATION_TYPE = 3
// 全局设置token与tokenType
Http.setGlobalTokenConfig({
authorizationTypeKey: 'Authorization',
authorizationTokenKey: 'authorization_type',
authorizationTypeValue: AUTHORIZATION_TYPE,
authorizationTokenValue: token
})
const httpIns = new Http('https://xxx.aaa.com');
const httpIns2 = new Http('https://xxx.bbb.com');
const httpIns3 = new Http('https://xxx.ccc.com');
const httpIns2Token = localStorage.getItem('authorization_httpIns2')
const AUTHORIZATION_HTTPINS_2_TYPE = 4
// 设置单个实例的token与tokenType
httpIns2.setInstanceTokenConfig({
authorizationTypeKey: 'Authorization',
authorizationTokenKey: 'authorization_type',
authorizationTypeValue: AUTHORIZATION_HTTPINS_2_TYPE,
authorizationTokenValue: httpIns2Token
})
//对单个实例设置请求拦截器
Http.setReqInterceptor(
config => {
console.log(config)
},
err => {
return Promise.reject(err);
},
'https://xxx.aaa.com'
);
httpIns
.post("/xxx/xxx/xxx", {
id: "xxx",
})
.then(res => {})
.catch(err => {
console.log(err);
});
httpIns2
.get("/xxx/xxx/xxx", { params: { id: 1 } })
.then(res => {});
httpIns3
.get("/xxx/xxxx")
.then(res => {
if (/^2/.test(res.status)) {
console.log(res.data);
} else {
console.log(res.data.error_code);
}
})
.catch(err => {
console.log(err);
});