鸿蒙Axios拦截器(响应拦截器,请求拦截器)
温馨提示：本文最后更新于2024年10月16日 09:00，若内容或图片失效，请在下方留言或联系博主。
在请求或响应被 then 或 catch 处理前拦截它们
创建类/实例：
/**
* 数据响应模型«登录VO»
*/
export interface ServiceResponse<T> {
/**
* 请求码，200为成功，300及300以上为请求失败
*/
code: number;
/**
* 响应信息
*/
msg?: string;
/**
* 响应时间
*/
resTime?: Date;
result?: T;
tips?: string;
}
/**
* 登录VO
*/
export interface ServiceResponseResult {
/**
* 访问token，有效期1小时
*/
accessToken?: string;
/**
* 头像
*/
avatar?: string;
/**
* 昵称
*/
nickname?: string;
/**
* 续期token，有效期30天
*/
renewalToken?: string;
}
// type 类型别名 (类似变量声明的关键词 const let)
type AxiosResponseData<T = null> = AxiosResponse<ServiceResponse<T>, null>
// 创建实例
export const axiosInstance = axios.create({
baseURL: BASE_URL, // 请求基地址
timeout: 1000 * 20 // 请求超时时间
})1. 请求拦截器：
// 添加请求拦截器
axiosInstance.interceptors.request.use((config: InternalAxiosRequestConfig) => {
// ===对请求数据做一些处理===
// PersistentStorage 其实就是特殊的 AppStorage 只不过会自动持久化而已
const loginInfo = AppStorage.get<LoginInfoResponse>(LOGIN_INFO)
// 如果有 accessToken 信息 自动添加到 headers 中
if (loginInfo?.accessToken) {
// 根据服务器接口 决定 Token 位置 = 持久化 Token 信息
config.headers.Authorization = loginInfo.accessToken
}
return config;
}, (error: AxiosError) => {
// Do something with the request error.
return Promise.reject(error);
});
2. 响应拦截器：
// 添加响应拦截器
axiosInstance.interceptors.response.use((response: AxiosResponseData) => {
// 对服务器响应做点什么 then 请求失败时:
if (response.data.code !== 200) { // response.data.code 服务器的业务状态码
// 把后端返回响应的错误信息 通过轻提示 提醒用户
promptAction.showToast({ message: response.data.msg })
// 主动返回错误 避免 await 后续代码执行
return Promise.reject(response.data.msg)
}
return response;
}, (error: AxiosError) => {
// 对服务器响应失败做点什么 catch 请求成功时:
if (error.message.includes('401')) {
// 401 unauthorized 身份验证出现了问题 token
promptAction.showToast({ message: '登录信息无效,请重新登录' })
} else if (error.message.includes('404')) {
// 404 Not Found 服务器找不到请求的资源
promptAction.showToast({ message: '无法识别的URL,请检查' })
} else {
// 未知错误
promptAction.showToast({ message: '未知错误' })
}
return Promise.reject(error);
});