【axios学习笔记】二次封装axios

【axios学习笔记】二次封装axios

写在前面

🤗这里是前端程序员小张！

🌻人海茫茫，感谢这一秒你看到这里。希望我的文章对你的有所帮助！

🌟愿你在未来的日子，保持热爱，奔赴山海！

一、Axios几个常用类型

在使用TypeScript封装Axios之前我们先来看看Axios几个重要的类型。

• AxiosRequestConfig

  • AxiosRequestConfig是我们使用axios发送请求传递参数的类型。当然它也是我们请求拦截器里面的参数类型。

    

• AxiosInstance

  • AxiosInstance是我们使用axios实例对象类型。

  • 我们使用axios.create(config?: AxiosRequestConfig)创建出来的对象都是AxiosInstance类型

    

• AxiosResponse

  • AxiosResponse是非常重要的，我们的axios请求返回值类型都是AxiosResponse类型;

  • AxiosResponse是一个接口泛型，这个泛型会应用到后端返回的data上；

  • 可以根据后端接口返回定义不同的类型传递进去

    

二、axios的二次封装

不过随着项目规模增大，如果每发起一次HTTP请求，就要把这些比如设置超时时间、设置请求头、根据项目环境判断使用哪个请求地址、错误处理等等操作，都就地写一遍。这种重复劳动不仅浪费时间，而且让代码变得冗余不堪，难以维护。

目的：

• 方便api统一管理
  • 不管接口有多少,所有的接口都可以非常清晰,容易维护；

1.1 基础封装

首先我们实现最基本的封装：

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

class XZRequest {
  instance: AxiosInstance

  // request实例 => axios的实例
  constructor(config: AxiosRequestConfig) {
      //每个实例的请求配置不同，传入的配置也就不同
      //通过axios(config)方式实现任意类型请求的方式
    this.instance = axios.create(config)
  }

  // 封装网络请求的方法
  request(config: AxiosRequestConfig) {
    return this.instance.request(config)
  }
}
export default XZRequest

封装为一个类的原因是因为类可以创建多个实例，适用范围更广，封装性更强一些。

1.2 添加拦截器

• 添加请求拦截器（前端给后端的参数）
• 添加响应拦截器（后端给前端的数据）

  constructor(config: AxiosRequestConfig) {
    this.instance = axios.create(config)
    this.instance.interceptors.request.use(
      (config) => {
        // 在发送请求之前做些什么
        console.log('请求成功的拦截')
        return config
      },
      (err) => {
        // 对请求错误数据做些什么
        console.log('请求失败的拦截')
        return err
      }
    )
    // 添加响应拦截器
    this.instance.interceptors.response.use(
      (res) => {
        //对响应数据做些什么
        console.log('响应成功的拦截')
        return res
      },
      (err) => {
        //响应失败做些什么
        console.log('响应失败的拦截')
        return err
      }
    )
  }

1.3 常用方法封装

在基础封装的时候我们封装了一个request通用方法，其实我们还可以更具体的封装get、post、put、delete方法，让我们使用更方便。

get(config: AxiosRequestConfig) {
    return this.instance.request({ ...config, method: 'GET' })
}

post(config: AxiosRequestConfig) {
    return this.instance.request({ ...config, method: 'POST' })
}

delete(config: AxiosRequestConfig) {
    return this.instance.request({ ...config, method: 'DELETE' })
}

patch(config: AxiosRequestConfig) {
    return this.instance.request({ ...config, method: 'PATCH' })
}

此时我们就可以构造不同的axios请求

// 统一出口
import XZRequest from './request/index'
import { BASE_URL, TIME_OUT } from './config/index'

const Request = new XZRequest({
  baseURL: BASE_URL,
  timeout: TIME_OUT
})

export default Request

xzRequest.request({
  url: ' ',
  method: 'GET'
})