鸿蒙之封装Axios网络请求工具类（包含拦截器）

简介

Axios ，是一个基于 promise 的网络请求库，可以运行 node.js 和浏览器中。本库基于Axios 原库v1.3.4版本进行适配，使其可以运行在 OpenHarmony，并沿用其现有用法和特性

特性

• http 请求
• Promise API
• 支持request 请求拦截器和 response响应拦截器
• 转换 request 和 response 的 data 数据
• 自动转换 JSON data 数据

其他特性：

• 多平台实现：可用 鸿蒙、前端、NodeJS 后端
• 质量稳定：ohos 官方推荐的第三方仓库，下载量 3W+
• 支持拦截器：请求拦截器（请求前添加通用业务代码），响应拦截器（对响应结果添加通用业务代码）

使用准备

安装axios(在控制台输入)

ohpm install @ohos/axiosx

OpenHarmony ohpm 环境配置等更多内容，请参考如何安装 OpenHarmony ohpm 包

配置权限

在module.json5文件中配置权限

//      获取网络信息权限
{
  "name": "ohos.permission.INTERNET"
}

接口和属性列表

接口列表

接口	参数	功能
axios(config)	config：请求配置	发送请求
axios.create(config)	config：请求配置	创建实例
axios.request(config)	config：请求配置	发送请求
axios.get(url[, config])	url：请求地址 config：请求配置	发送get请求
axios.delete(url[, config])	url：请求地址 config：请求配置	发送delete请求
axios.post(url[, data[, config]])	url：请求地址 data：发送请求体数据 config：请求配置	发送post请求
axios.put(url[, data[, config]])	url：请求地址 data：发送请求体数据 config：请求配置	发送put请求

属性列表

属性	描述
axios.defaults['xxx']	默认设置 。值为请求配置 config 中的配置项 例如 axios.defaults.headers 获取头部信息
axios.interceptors	拦截器。参考 拦截器 的使用

拦截器

在请求或响应被 then 或 catch 处理前拦截它们。

// 添加请求拦截器
axios.interceptors.request.use((config:InternalAxiosRequestConfig) => {
  // 对请求数据做点什么
  return config;
}, (error:AxiosError) => {
  // 对请求错误做些什么
  return Promise.reject(error);
});


// 添加响应拦截器
axios.interceptors.response.use((response:AxiosResponse)=> {
  // 对响应数据做点什么
  return response;
}, (error:AxiosError)=> {
  // 对响应错误做点什么
  return Promise.reject(error);
});

移除拦截器

const myInterceptor = axios.interceptors.request.use((response: AxiosResponse)=> {/*...*/});
axios.interceptors.request.eject(myInterceptor);

可以给自定义的 axios 实例添加拦截器

const instance = axios.create();
instance.interceptors.request.use((config:InternalAxiosRequestConfig)=> {/*...*/});

封装Axios网络请求工具类

1. 创建 axios 实例，配置请求基地址，请求超时时间
2. 整合 Axios 响应类型，后端响应结构类型 + 接口数据类型。
3. 整合拦截器，统一处理错误响应。

import axios, { AxiosError, AxiosResponse, InternalAxiosRequestConfig } from '@ohos/axios';
import { BASE_URL, LoginInfoResponse, LOGIN_INFO } from '../constants';
//BASE是基础地址，LoginInfoResponse是用户登录信息类型，LOGIN_INFO是存放用户登录数据的变量，这些值都可以自己重新设置
import { promptAction, router } from '@kit.ArkUI';

/**
 * 数据响应模型«result»
 */
export interface ServiceResponse<T> {
  code: number; //响应状态码， * 请求码，200为成功，300及300以上为请求失败
  msg: string; //响应信息
  resTime: Date; //响应时间
  result: T; //响应结果
  tips: string; //
}

// 创建实例
export const axiosInstance = axios.create({
  baseURL: BASE_URL, // 请求基地址
  timeout: 1000 * 20 // 请求超时时间
})

//自定义响应体的类型参数
export type AxiosResponseData<Result = null> = AxiosResponse<ServiceResponse<Result>, null>

// type 类型别名,保存类型（类似变量声明的关键词 const let）

// axios.post<参数1, 参数2, 参数3> 范型-=---<T = any, R = AxiosResponse<T>, D = any>(url)
// 参数1-T: 响应数据类型，会被第二个参数覆盖
// 参数2-R: 响应体的类型，R 是 AxiosResponse<T>
// 参数3-D: 请求参数的类型

// 拦截器：在请求或响应被 then 或 catch 处理前拦截它们。
// 添加请求拦截器
axiosInstance.interceptors.request.use((config: InternalAxiosRequestConfig) => {
  // 获取持久化中的用户信息
  const loginInfo = AppStorage.get<LoginInfoResponse>(LOGIN_INFO) // 在页面中可通过 @StorageLink 获取持久化的信息，在非页面中可通过 AppStorage.get/AppStorage.set 获取/更新
  // 如果有访问 token，把访问 token 自动添加到 headers 中
  if (loginInfo?.accessToken) {
    config.headers.Authorization = loginInfo.accessToken
  }
  // 对请求数据做点什么
  return config;
}, (error: AxiosError) => {
  // 对请求错误做些什么
  return Promise.reject(error);
});


// 添加响应拦截器
axiosInstance.interceptors.response.use((response: AxiosResponseData) => {
  // 对响应数据做点什么，then 响应成功时
  //  response.data.code 是服务器的业务状态码
  if (response.data.code !== 200) {
    // 把后端响应的错误信息，通过轻提示，提醒用户
    promptAction.showToast({ message: response.data.msg })
    // 主动返回错误，避免 await 后续代码执行
    return Promise.reject(response.data.msg)
  }
  return response;
}, (error: AxiosError) => {
  // 对响应错误做点什么，catch 响应失败时
  // 错误类型
  // 401：Token失效、404：Url路径错误、其他错误
  if (error.message.includes('401')) {
    // 401 Unauthorized 身份验证出问题了 token失效
    promptAction.showToast({ message: '登录信息无效，请重新登录' })
    router.pushUrl({ url: 'pages/User/UserLoginPage' })
  } else if (error.message.includes('404')) {
    // 404 Not Found 服务器找不到请求的资源
    promptAction.showToast({ message: '无法识别的 URL，请检查' })
  } else {
    promptAction.showToast({ message: '未知网络请求错误' })
  }
  // 未知错误
  return Promise.reject(error);
});