持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第14天，点击查看活动详情

为什么要封装axios

在我们项目中，经常需要进行网络请求，而axios为我们封装好了ajax，我们可以拿来直接使用，但是呢，这样就会出现一个问题，如果有一天axios不在维护了，那我们的项目每个界面都用到axios，那需要修改到什么时候，所以为了防止出现这样的问题，我们就把axios进行二次封装，如果真有那么一天，我们只需要修改我们自己封装的库就可以了

大佬有没有需要初级前端的，看看我

如何封装

axios主要用来发送ajax请求

首先要区分此时的环境，不同的环境请求不同的地址
发送axios需要传入配置，最基本的有url,methods
axios提供create方法，传入config配置，就可以发送请求
我们封装一个类SCCRequest，定义一个instance，把创建好的axios传给instance，让后对他进行封装

import axios from 'axios'
import type { AxiosInstance, AxiosRequestConfig } from 'axios'
class SCCRequest {
  instance: AxiosInstance
  constructor(config: AxiosRequestConfig) {
    this.instance = axios.create(config)
  }
  request(config: AxiosRequestConfig): void {
    this.instance.request(config).then((res) => {
      console.log(res)
    })
  }
}
export default SCCRequest

定义一个request方法，然后把传过来的配置给他，让他发送ajax请求

因为是TS所以我们在axios的ts文件中拿到了他的类型

我们是在vue项目中的，最好配置一下不同环境变量对应的url

这个我们上一篇配置vue项目的环境已经说明白了，这这里直接使用，就不多说了

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 if (process.env.NODE_ENV === 'test') {
  BASE_URL = 'http://123.207.32.32:8000/'
}
export { BASE_URL, TIME_OUT }

我们在需要这个环境的地方导出他，并且实例化SCCRequest，也导出

import SCCRequest from './request'
import { BASE_URL, TIME_OUT } from './request/config'
const sccRequest = new SCCRequest({
  baseURL: BASE_URL,
  timeout: TIME_OUT
})
export default sccRequest

此时我们只需要引用这个文件的sccRequest中的request方法就可以发送请求了

发送请求

引入sccRequest，并且传入url和methods

import sccRequest from './service/axios_demo'
sccRequest.request({
  url: '/home/multidata',
  method: 'GET'
})

页面展示

我们可以看到已经请求成功了，明天接着封装，今天偷偷懒

结束

爱你们

TS封装axios

为什么要封装axios

如何封装

发送请求

结束