1.为什么要创建axios的实例呢?
- 当我们从axios模块中导入对象时, 使用的实例是默认的实例.
- 当给该实例设置一些默认配置时, 这些配置就被固定下来了.但是后续开发中, 某些配置可能会不太一样.比如某些请求需要使用特定的baseURL或者timeout或content-Type等.
- 这个时候, 我们就可以创建新的实例, 并且传入属于该实例的配置信息.
2.封装代码可以自选是否传入拦截器(其实就是在use()中传入两个钩子函数)
axios设置拦截器:拦截每次请求和响应,简单使用方法如下:
- paxios.interceptors.request.use(请求成功拦截, 请求失败拦截)
- paxios.interceptors.response.use(响应成功拦截, 响应失败拦截)
axios.interceptors.request.use(function (config) {
// 在发送请求之前做些什么
return config;
}, function (error) {
// 对请求错误做些什么
return Promise.reject(error);
});
// 添加响应拦截器
axios.interceptors.response.use(function (response) {
// 对响应数据做点什么
return response;
}, function (error) {
// 对响应错误做点什么
return Promise.reject(error);
});
3.正式封装
3.1核心封装文件
import axios from 'axios';
//引入axios实例类型
import type { AxiosInstance, AxiosRequestConfig } from 'axios'
//引入自己封装的接口,实现拦截器的合法传入
import {HYRequestInterceptors,HYRequestConfig} from './type'
class HYRequest {
instance: AxiosInstance
interceptors?: HYRequestInterceptors;
//这里的config: HYRequestConfig类型是由于AxiosRequestConfig中不能接收拦截器的参数
constructor(config: HYRequestConfig) {
this.instance = axios.create(config)
this.interceptors = config.interceptors
this.instance.interceptors.request.use(this.interceptors?.requestInterceptor,this.interceptors?.requestInterceptorCatch)
}
//使用request测试是否成功
request(config: AxiosRequestConfig) {
this.instance.request(config).then((res) => {
console.log(res);
})
}
}
export default HYRequest;
3.2自己定义的类型接口
import type {AxiosRequestConfig,AxiosResponse } from'axios'
export interface HYRequestInterceptors {
requestInterceptor?: (config: AxiosRequestConfig)=>AxiosRequestConfig
requestInterceptorCatch?: (error: any) => any
responseInterceptor?: (config:AxiosResponse)=>AxiosResponse
responseInterceptorCatch?: (error: any) => any
}
export interface HYRequestConfig extends AxiosRequestConfig{
interceptors?:HYRequestInterceptors
}
3.3环境变量的使用
let BASE_URL = "";
const TIME_OUT = 10000;
if (process.env.NODE_ENV === "development") {
BASE_URL = "http://123.207.32.32:8000/";
} else if (process.env.NODE_ENV === "production") {
BASE_URL = "http://123.207.32.32:8000/";
} else {
BASE_URL = "http://123.207.32.32:8000/";
}
export { BASE_URL, TIME_OUT };
3.4生成实例,传入全局的配置(对外暴露的接口)
import HYRequest from "./request/request";
import { BASE_URL, TIME_OUT } from "./request/config";
const hyRequest = new HYRequest({
baseURL: BASE_URL,
timeout: TIME_OUT,
interceptors: {
requestInterceptor: function(config) {
console.log(config);
return config;
},
requestInterceptorCatch: (error) => error,
},
});
export default hyRequest;
网友评论