Vue3+TypeScript 项目封装axios

Vue3+TypeScript 项目封装axios

VUE CLI 中代码目录解构

• config.js

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') {
  
}

export { BASE_URL, TIME_OUT }

• request/index.ts

// 关于axios的封装，都封装到这个类里面，因为类具备很强的封装性，比函数要强
import axios from 'axios'
import type { AxiosInstance, AxiosRequestConfig } from 'axios' //axios内部已经提供了关于axios实例的类型
class YPRequest {
  instance: AxiosInstance //instance 用于区分，当有多个请求时，是用不同的实例
  constructor(config: AxiosRequestConfig) {
    //可以点击config进去看里面的类型
    this.instance = axios.create(config)
  }
  request(config: AxiosRequestConfig): void {
    this.instance.request(config).then((res) => {
      console.log(res.data)
    })
  }
}

export default YPRequest

首先 肯定是要导入axios
定义一个类，定义类的目的是因为类具有极强的封装性
当service/index.ts 中 使用了不同的 YPRequest() 传入不同的BASE_URL时，
用不同的 属性的值instance可作区分。
其中，this.instance = axios.create(config) , 利用axios.create创造不同的axios实例
这里，相当于给 axios,defaluts.baseURL 与 axios.defaluts.timeout 做了赋值操作 并构建了实例

AxiosRequestConfig,AxiosRequestConfig 都是axios内部定义的type

• service/index.ts

// service 统一出口
import YPRequest from './request'
import { BASE_URL, TIME_OUT } from './request/config'
const ypRequest = new YPRequest({
  baseURL: BASE_URL,
  timeout: TIME_OUT
})

// export const ypRequest2 = new YPRequest()
// baseURL:地址一
//这里创造不同的实例，用instance作为区分
export default ypRequest

• main.ts
  发送网络请求

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