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（可以鉴戒）：
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
else requestOptions = options
}
}
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
else requestOptions = options
}
}
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
else requestOptions = options
}
}
this.interceptors(axiosInstance)
return axiosInstance(requestOptions)
}
那么在axiosInstance(requestOptions)的requestOptions选项配置里面实际是下面这样的
因为if (conf == 'params') requestOptions['data'] = options所以把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转化成
{
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
}, 解说就到这了哦，不懂请留言或者私信我~
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。
页:
[1]