概述
Axios是一个基于Promise的HTTP客户端, 用于浏览器和Nodejs中. 它是个独立的, 轻巧的库. Axios提供了丰富的API以处理HTTP请求, 并支持Promise API, 使得异步HTTP请求更加简洁和易于管理.
Axios的主要特征
- 基于Promise: Axios的所有请求都返回一个Promise对象, 这使得异步操作更加简洁和可预测. 可以使用.then()和.catch()方法来处理请求成功和失败的情况.
- 客户端支持防止CSRF: Axios库具有内置的CSRF防护措施, 可以提高应用程序的安全性.
- 自动转化JSON数据: 当请求或响应数据是JSON格式时, Axios会自动将其转换为JavaScript对象, 使得数据处理更加便捷.
- 响应拦截器和请求拦截器: Axios允许你设置响应拦截器和请求拦截器, 以便在请求被发送或响应被处理之前对其进行修改或检查.
- 取消请求: Axios 提供了一种取消正在进行的请求的方法，这在某些场景下非常有用，例如当用户导航到其他页面时取消正在进行的请求.
- 客户端支持保护安全免受 CSRF 攻击：Axios 在默认情况下会发送同源请求的 Cookie，当需要跨站点请求伪造保护时，可以通过设置 withCredentials 为 true 来启用.
Axios封装解析
1. 创建Axios对象
export const axiosInstance = axios.create({
baseURL: Const.BASE_URL,
timeout: Const.HTTP_READ_TIMEOUT
})
2. 拦截Axios请求, 对请求做一些操作
axiosInstance.interceptors.request.use(
(config) => {
// 在发送请求之前做些什么
// 例如，添加请求头、身份验证等
// 请求拦截token
if(UserInfoStore.getToken()) config.headers['Authorization'] = 'Bearer ' + UserInfoStore.getToken()
return config
},
(error: AxiosError) => {
// 对请求错误做些什么
return Promise.reject(error);
}
)
3. 拦截Axios的响应结果, 对返回的结果执行一些操作
axiosInstance.interceptors.response.use(
(response: AxiosResponse) => {
// 对响应数据做处理，例如只返回data部分
if(response.status !== 200) {
return Promise.reject(response.data.message)
}
return response.data;
},
(error: AxiosError) => {
// 对相应结果错误做些什么
return Promise.reject(error);
}
)
4. 由于我们使用的typeScript编写的项目, 所以针对于Axios一些接口, 需要动态传送数据类型, 所有就是用了泛型方式, 进行传递.
// 封装 GET 请求
export function get<T, D>(url: string, params?: D, config?: AxiosRequestConfig): Promise<AxiosResponse<T>> {
return axiosInstance.get<T>(url, { params, ...config });
}
// 封装 POST 请求
export function post<T, D>(url: string, data?: D, config?: AxiosRequestConfig): Promise<AxiosResponse<T>> {
return axiosInstance.post<T>(url, data, config);
}
// 封装 PUT 请求
export function put<T>(url: string, data?: T, config?: AxiosRequestConfig): Promise<AxiosResponse<T>> {
return axiosInstance.put<T>(url, data, config);
}
// 封装 DELETE 请求
export function del<T>(url: string, data?: T, config?: AxiosRequestConfig): Promise<AxiosResponse<T>> {
return axiosInstance.delete<T>(url, config);
}
如何使用封装的Axios
在我们的.ets页面中, 引入Axios方法
import { get } from '../common/utils/AxiosService'
在调用数据的地方进行请求接口
get<IClockItem, IParamsItem>('clockinInfo', params)
.then((res: AxiosResponse<IClockItem>) => {
// 获取接口返回的数据
const res = res.data
})
.catch((err: AxiosError) => {
Logger.info(TAG ,'error--->', JSON.stringify(err))
})
