vue3+ts的axios的二次封装以及请求参数（data、params、formData）的区分

有时候在二次封装axios时常常会遇到使用请求参数的问题，下面就是我很好的区分这些参数的各自作用和使用场景，欢迎点赞评论哦~

首先明白axios 的一些基本配置选项

axios 提供了一个非常灵活的配置选项，允许你自定义请求的各种属性。当你使用 axios 或者一个自定义的 axios 实例（如 axiosInstance）时，你可以通过 requestOptions 对象传递这些配置。以下是一些常见的 requestOptions 属性及其用途：

基本请求配置

1. url (string): 请求的 URL。
2. method (string): 请求方法（例如 get, post, put, delete 等）。默认为 get。
3. baseURL (string): 用于设置请求的基本 URL。
4. headers (object): 设置请求头。
5. params (object): 设置 URL 查询参数。
6. data (any): 发送到服务器的数据。对于 POST、PUT 和 PATCH 请求，这通常是请求体。
7. timeout (number): 设置请求超时时间（以毫秒为单位）。
8. responseType (string): 指定响应类型（例如 arraybuffer, blob, document, json, text, stream）。
9. responseEncoding (string): 指定响应编码（例如 utf8）。
10. xsrfCookieName (string): 用于 CSRF 保护的 cookie 名称。
11. xsrfHeaderName (string): 用于 CSRF 保护的 HTTP 头名称。
12. maxContentLength (number): 定义内容的最大长度（以字节为单位）。
13. maxBodyLength (number): 定义请求体的最大长度（以字节为单位）。
14. validateStatus (function): 自定义状态码验证函数。
15. cancelToken (CancelToken): 用于取消请求的令牌。
16. onUploadProgress (function): 上传进度事件处理程序。
17. onDownloadProgress (function): 下载进度事件处理程序。
18. auth (object): 包含 username 和 password 的对象，用于基本认证。
19. withCredentials (boolean): 是否发送 cookies。
20. transformRequest (array | function): 在请求发送前对数据进行转换。
21. transformResponse (array | function): 在响应数据返回后对数据进行转换。

下面是封装的axios（可以借鉴）：

import router from '@/router'
import { useTagsViewStore } from '@/store/modules/tagsView'
import { useUserStore } from '@/store/modules/user'
import axios, { AxiosInstance, AxiosRequestConfig } from 'axios'
import { ElLoading, ElMessageBox } from 'element-plus'
import { Loading } from 'element-plus/es/components/loading/src/service'

let loading = null
class HttpRequest {
  private readonly baseUrl: string = import.meta.env.VITE_BASE_REQUEST_URL
  private defaultConfig() {
    return {
      baseURL: this.baseUrl,
      timeout: 10000,
      withCredentials: true,
      headers: {
        'Content-Type': 'application/json;charset=utf-8',
      },
    }
  }

  private interceptors(instance: AxiosInstance) {
    // 请求拦截
    instance.interceptors.request.use(
      (config) => {
        // 添加全局的loading..
        loading = ElLoading.service({
          fullscreen: true,
          lock: true,
          text: '正在加载...',
          background: 'rgba(0, 0, 0, 0.7)',
        })
        // 请求头携带token
        const UserStore = useUserStore()
        const token = UserStore.token
        if (token) {
          config.headers.Authorization = 'Bearer ' + token
        }
        // console.log('请求拦截config', config)
        return config
      },
      (error: any) => {
        return Promise.reject(error)
      },
    )
    //响应拦截
    instance.interceptors.response.use(
      (res) => {
        // console.log('响应拦截res', res)
        const UserStore = useUserStore()
        const TagsViewStore = useTagsViewStore()

        if (res.data.code != 200 && res.data.code != 401) {
          loading.close()
          ElMessage.error(res.data.msg)
          return Promise.reject(res.data)
        } else if (res.data.code === 401) {
          loading.close()
          ElMessageBox.alert('登录的信息已过期，请重新登录', '提示', {
            confirmButtonText: '确定',
            callback: async () => {
              await router.go(0)
              await UserStore.logout()
              TagsViewStore.clearVisitedView()
              ElMessage({
                type: 'success',
                message: '退出登录成功！需重新登录。',
              })
            },
          })
          // return Promise.reject(res.data)
        }
        loading.close()
        return res
      },
      (error: any) => {
        loading.close()
        return Promise.reject(error)
      },
    )
  }

  public request(options: AxiosRequestConfig) {
    const axiosInstance = axios.create()
    let requestOptions: any = {}
    if (options['method'].toLowerCase() == 'get') {
      requestOptions = this.defaultConfig()
      requestOptions.headers = {}
      requestOptions = Object.assign(requestOptions, options)
    } else {
      requestOptions = this.defaultConfig()
      for (let conf in options) {
        if (conf == 'params') requestOptions['data'] = options[conf]
        else requestOptions[conf] = options[conf]
      }
    }
    this.interceptors(axiosInstance)
    return axiosInstance(requestOptions)
  }
}
const http = new HttpRequest()
export default http

具体代码解析如下：

params（适用axios的get请求）：

在使用 axios 发送 GET 请求时，你可以通过 params 参数来传递查询参数。params 是一个对象，其中的键值对会被转换为 URL 查询字符串。

请求接口：http.request({ url: 'api/merAcct/list', method: 'get', params: {pageIndex: 1,pageSize:2}})

对应上面封装axios的逻辑片段

 public request(options: AxiosRequestConfig) {
    const axiosInstance = axios.create()
    let requestOptions: any = {}
    if (options['method'].toLowerCase() == 'get') {
      requestOptions = this.defaultConfig()
      requestOptions.headers = {}
      requestOptions = Object.assign(requestOptions, options)
    } else {
      requestOptions = this.defaultConfig()
      for (let conf in options) {
        if (conf == 'params') requestOptions['data'] = options[conf]
        else requestOptions[conf] = options[conf]
      }
    }
    this.interceptors(axiosInstance)
    return axiosInstance(requestOptions)
  }

那么在axiosInstance(requestOptions)的requestOptions选项配置里面实际是下面这样的

因为  请求头requestOptions.headers = {}

{

      baseURL: https://localhost:8080/

      url: 'api/merAcct/list',

      params: {pageIndex: 1,pageSize:2}

      timeout: 10000,

      withCredentials: true,

      headers: {},

实际上url会变成

 https://localhost:8080/api/merAcct/list?pageIndex=1&pageSize=20

这就是你的实际请求接口链接

data（适用axios的post请求）：

请求接口：http.request({ url: 'api/merAcct/list', method: 'post', params: {pageIndex: 1,pageSize:2}})

对应上面封装axios的逻辑片段

 public request(options: AxiosRequestConfig) {
    const axiosInstance = axios.create()
    let requestOptions: any = {}
    if (options['method'].toLowerCase() == 'get') {
      requestOptions = this.defaultConfig()
      requestOptions.headers = {}
      requestOptions = Object.assign(requestOptions, options)
    } else {
      requestOptions = this.defaultConfig()
      for (let conf in options) {
        if (conf == 'params') requestOptions['data'] = options[conf]
        else requestOptions[conf] = options[conf]
      }
    }
    this.interceptors(axiosInstance)
    return axiosInstance(requestOptions)
  }

那么在axiosInstance(requestOptions)的requestOptions选项配置里面实际是下面这样的

因为if (conf == 'params') requestOptions['data'] = options[conf]所以把params的数据给到data参数，是JSON数据格式

{

      baseURL: https://localhost:8080/

      url: 'api/merAcct/list',

      data: {pageIndex: 1,pageSize:2}

      timeout: 10000,

      withCredentials: true,

      headers: {

        'Content-Type': 'application/json;charset=utf-8',

      },

实际上url会变成

 https://localhost:8080/api/merAcct/list

formData（适用axios的post请求）：

在 axios 中，requestOptions 对象本身并没有一个名为 formData 的属性。formData 通常是指你使用 FormData 对象来构建请求体数据，并将其作为 data 属性传递给 axios 请求。

http.request({ url: 'api/merAcct/list', method: 'post', params:formData})

通过if (conf == 'params') requestOptions['data'] = options[conf]转化成

{

      baseURL: https://localhost:8080/

      url: 'api/merAcct/list',

      data: {pageIndex: 1,pageSize:2}

      timeout: 10000,

      withCredentials: true,

      headers: {
       'Content-Type': 'multipart/form-data' // 设置适当的 Content-Type
      },

讲解就到这了哦，不懂请留言或者私信我~