在项目中用ts封装axios

不能懒鸭

已于 2022-03-09 12:36:18 修改

阅读量627

点赞数

分类专栏： javascript 文章标签：前端 javascript

于 2022-03-07 22:07:24 首次发布

本文链接：https://blog.csdn.net/m0_45382009/article/details/123341253

版权

本文介绍如何在项目中使用TypeScript封装axios，包括基础封装和拦截器封装。基础封装通过创建一个类来增强封装性。拦截器封装分为类拦截器、实例拦截器和接口拦截器。类拦截器在类中设置axios实例的拦截器，实例拦截器允许在每个实例中设置不同的拦截行为，接口拦截器则允许对特定接口进行拦截操作。

摘要由CSDN通过智能技术生成

在项目中用ts封装axios

基础封装

import axios from 'axios'
import type {
   AxiosInstance,AxiosRequestConfig,AxiosResponse} from 'axios'

class Request{
   
    //axios实例，并将它作为 类的instance属性（属性名自定义）
    instance:AxiosInstance
    constructor(config:AxiosRequestConfig){
   
        this.instance = axios.create(config)
    }
	request(config:AxiosRequestConfig){
   
        return this.instanse.request(config) //类的方法request是绑定在原型上的，所以实例也可以访问到
    }
}

这里讲题封装为一个类，而不是一个函数，是因为类可以创建多个实例，适用范围更广，封装性更强。

拦截器封装

先封装一下拦截器，这个拦截器分三种：

类拦截器
实例拦截器
接口拦截器

1. 类拦截器

类拦截器比较容易实现，只要在类中对axios.create()创建的实例，调用interceptors 下的两个拦截器即可，实例代码如下：

constructor(config:AxiosRequestConfig){
   
        this.instance = axios.create(config)
    	
    	this.instance.interceptors.request.use(
        	(res:AxiosRequestConfig )=>{
   
                console.log('全局请求拦截器') 
    			return res
            },
            (err:any)=>err,
        )
        this.instance.interceptors.response.