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

偶然候在二次封装axios时常常会遇到使用哀求参数的问题，下面就是我很好的区分这些参数的各自作用和使用场景，欢迎点赞评论哦~
首先明确axios 的一些基本配置选项
axios 提供了一个非常灵活的配置选项，答应你自定义哀求的各种属性。当你使用 axios 或者一个自定义的 axios 实例（如 axiosInstance）时，你可以通过 requestOptions 对象传递这些配置。以下是一些常见的 requestOptions 属性及其用途：
基本哀求配置

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

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

1. import router from '@/router'
2. import { useTagsViewStore } from '@/store/modules/tagsView'
3. import { useUserStore } from '@/store/modules/user'
4. import axios, { AxiosInstance, AxiosRequestConfig } from 'axios'
5. import { ElLoading, ElMessageBox } from 'element-plus'
6. import { Loading } from 'element-plus/es/components/loading/src/service'
8. let loading = null
9. class HttpRequest {
10.   private readonly baseUrl: string = import.meta.env.VITE_BASE_REQUEST_URL
11.   private defaultConfig() {
12.     return {
13.       baseURL: this.baseUrl,
14.       timeout: 10000,
15.       withCredentials: true,
16.       headers: {
17.         'Content-Type': 'application/json;charset=utf-8',
18.       },
19.     }
20.   }
22.   private interceptors(instance: AxiosInstance) {
23.     // 请求拦截
24.     instance.interceptors.request.use(
25.       (config) => {
26.         // 添加全局的loading..
27.         loading = ElLoading.service({
28.           fullscreen: true,
29.           lock: true,
30.           text: '正在加载...',
31.           background: 'rgba(0, 0, 0, 0.7)',
32.         })
33.         // 请求头携带token
34.         const UserStore = useUserStore()
35.         const token = UserStore.token
36.         if (token) {
37.           config.headers.Authorization = 'Bearer ' + token
38.         }
39.         // console.log('请求拦截config', config)
40.         return config
41.       },
42.       (error: any) => {
43.         return Promise.reject(error)
44.       },
45.     )
46.     //响应拦截
47.     instance.interceptors.response.use(
48.       (res) => {
49.         // console.log('响应拦截res', res)
50.         const UserStore = useUserStore()
51.         const TagsViewStore = useTagsViewStore()
53.         if (res.data.code != 200 && res.data.code != 401) {
54.           loading.close()
55.           ElMessage.error(res.data.msg)
56.           return Promise.reject(res.data)
57.         } else if (res.data.code === 401) {
58.           loading.close()
59.           ElMessageBox.alert('登录的信息已过期，请重新登录', '提示', {
60.             confirmButtonText: '确定',
61.             callback: async () => {
62.               await router.go(0)
63.               await UserStore.logout()
64.               TagsViewStore.clearVisitedView()
65.               ElMessage({
66.                 type: 'success',
67.                 message: '退出登录成功！需重新登录。',
68.               })
69.             },
70.           })
71.           // return Promise.reject(res.data)
72.         }
73.         loading.close()
74.         return res
75.       },
76.       (error: any) => {
77.         loading.close()
78.         return Promise.reject(error)
79.       },
80.     )
81.   }
83.   public request(options: AxiosRequestConfig) {
84.     const axiosInstance = axios.create()
85.     let requestOptions: any = {}
86.     if (options['method'].toLowerCase() == 'get') {
87.       requestOptions = this.defaultConfig()
88.       requestOptions.headers = {}
89.       requestOptions = Object.assign(requestOptions, options)
90.     } else {
91.       requestOptions = this.defaultConfig()
92.       for (let conf in options) {
93.         if (conf == 'params') requestOptions['data'] = options[conf]
94.         else requestOptions[conf] = options[conf]
95.       }
96.     }
97.     this.interceptors(axiosInstance)
98.     return axiosInstance(requestOptions)
99.   }
100. }
101. const http = new HttpRequest()
102. 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会变成

1. 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]转化成

1. {
3.       baseURL: https://localhost:8080/
5.       url: 'api/merAcct/list',
7.       data: {pageIndex: 1,pageSize:2}
9.       timeout: 10000,
11.       withCredentials: true,
13.       headers: {
14.        'Content-Type': 'multipart/form-data' // 设置适当的 Content-Type
15.       },

复制代码

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


免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。