曹旭辉 发表于 2025-3-23 11:20:10

Axios,请求拦截器, 鸿蒙NEXT版

1、第一步创建Axios实例
// 创建实例
export const axiosInstance = axios.create({
baseURL: 'https://www.baidu.com/', // 请求基地址
timeout: 1000 * 15 // 请求超时时间
}) 2、第二步界说Data数据响应的数据类型
// 后端响应基本类型
export interface ServiceResponse<Result> {
code: string
msg: string
result: Result
} 3、界说Result数据泛型
// Axios 响应类型 > 后端响应基本类型 > 不同接口响应的类型
export type AxiosResponseData<Result = null, Data = null> = AxiosResponse<ServiceResponse<Result>, Data>
4、参加请求拦截器,携带Token访问权限
// 添加请求拦截器
axiosInstance.interceptors.request.use((config: InternalAxiosRequestConfig) => {
const loginInfo = AppStorage.get<UserInfo>(USER_KEY)
if (loginInfo?.token) {
    config.headers.Authorization = loginInfo?.token
}
// 对请求数据做点什么
return config;
}, (error: AxiosError) => {
// 对请求错误做些什么
// AlertDialog.show({ message: JSON.stringify(error.message, null, 2) })
return Promise.reject(error);
}); 4、添加响应拦截器
// 添加响应拦截器,AxiosResponse -> AxiosResponseData 书写时有提示
axiosInstance.interceptors.response.use((response: AxiosResponseData) => {
// 后端能响应结果,但是业务码出现错误,提示后端返回的 msg 信息
AlertDialog.show({ message: JSON.stringify(response.data, null, 2) })
if (response.data.code !== '200') {
    promptAction.showToast({ message: response.data.msg })
    // 标记为 reject 失败,防止 await 后续代码执行
    // return Promise.reject(response)
}
// 对响应数据做点什么
return response;
}, (error: AxiosError) => {
// 服务器响应失败,如 404 找不到路径,服务器错误,无网络的提示 等
AlertDialog.show({ message: JSON.stringify(error.message, null, 2) })
if (error.message.includes('404')) {
    promptAction.showToast({ message: '请求错误,请检查 url 路径' })
}
else if (error.message.includes('401')) {
    promptAction.showToast({ message: '登录信息无效' })
}
// 对响应错误做点什么
return Promise.reject(error);
});
免责声明:如果侵犯了您的权益,请联系站长,我们会及时删除侵权内容,谢谢合作!更多信息从访问主页:qidao123.com:ToB企服之家,中国第一个企服评测及商务社交产业平台。
页: [1]
查看完整版本: Axios,请求拦截器, 鸿蒙NEXT版