鸿蒙开发axios超详细解析，以及完整封装，一次封装终身可用，小白都能上手使用axios发送网络请求_鸿蒙 axios

在鸿蒙客户端开发过程中，客户端和服务器进行数据交互，必然会使用到http模块去发送网络请求，鸿蒙原生的http模块使用起来比较繁琐，当然，也可提前封装，简化后边请求数据的操作，在第三方库中有一个广为人知的网络请求工具axios，axios库便是对http模块的网络请求工具进行了封装，简便了开发者发送网络请求的操作，在这里分享一个对axios的进一步封装步骤，满足基本的增删查改操作。附上完整封装好的axios工具，一次封装，终身受用。

1、安装axios

OpenHarmony三方库中心仓https://ohpm.openharmony.cn/#/cn/detail/@ohos%2Faxios在这一切的操作之前需要打开项目的网络权限，在项目的module.json5文件中配置

在module下面配置以下：

 \"requestPermissions\": [ { \"name\": \"ohos.permission.INTERNET\" } ]

在项目终端运行以下命令安装axios工具包

ohpm i @ohos/axios

2、创建axios实例，写上基地址

这一步操作需要将baseURL替换成自己项目的请求基地址

// 创建Axios实例export const instance = axios.create({ // 请求基地址 替换为自己项目的请求基地址 baseURL: \'https://xxxxxxx\',});

3、封装请求拦截器

请求拦截器顾名思义，在请求发出去之前会经过这里，这里可以对请求参数进行修改，一般这里会执行请求头自动注入token操作，也可以在这里注入一些请求基类参数

// 请求拦截器 发请求之前进入这里instance.interceptors.request.use((config: InternalAxiosRequestConfig) => { // 这里可以对请求参数进行修改 比如请求头自动注入token return config;}, (error: AxiosError) => { return Promise.reject(error);});

4、封装响应拦截器

响应拦截器，也是顾名思义 ，服务器响应数据会先进入这里，分为请求成功与请求失败，在请求失败里边可以提示错误信息，在请求成功里边又需要判断业务是否成功，业务状态码为后台返回状态码，需要根据接口文档填写，若是成功，则将相应的数据return出去完成成功的网络请求，若是失败，则提示错误信息

// 响应拦截器instance.interceptors.response.use((response: AxiosResponse) => { // 响应成功进入这里 // 这里根据业务码进行判断 比如code为200则返回数据 否则弹出错误提示 if (response.data.code ===\'网络请求成功码\') { return response.data.data; } // 提示错误信息 msg字段根据自己服务端返回的字段进行修改 promptAction.showToast({ message: response.data.msg }); return Promise.reject(new Error(response.data.msg));}, (error: AxiosError) => { // 请求失败进入这里 // 这里可以根据自己的业务逻辑进行修改 比如判断错误码进行错误提示 401 404 等等 const res = error.response?.data as object; if (res) { // 提示服务端返回的错误信息 promptAction.showToast({ message: res[\"msg\"] }); } return Promise.reject(error);});

 5、封装post、get、put、delete四种方法

为了简便我们后续的发请求操作，在axios封装这里就可以直接将增删改查四个方法直接封装好，后续使用只需要传地址和参数即可，降低了开发成本这里封装是根据axios的请求类型以及响应类型来封装的，以get方法为例：

get<T = any, R = AxiosResponse, D = any> 这里可以看到返回值类型为Promise 也就是说这个方法最终得到的数据是一个Promise的对象，开发者在传入类型时，R类型会将T类型覆，

即使传入T类型也只会得到Promise<AxiosResponse> ,为何不直接将T置为null，开发者只需要传入R即可确定返回值类型，这个D是请求参数类型，现在还不确定，可以直接使用object替代，在使用时确定类型即可。其他3个方法也是同理。

在这里导出了一个RequestAxios类

 get<T = any, R = AxiosResponse, D = any>(url: string, config?: AxiosRequestConfig): Promise;

export class RequestAxios { static get(url: string, params?: object): Promise { return instance.get(url, { params }); } static post(url: string, data?: object): Promise { return instance.post(url, data); } static delete(url: string, data?: object): Promise { return instance.delete(url, { data }); } static put(url: string, data?: object): Promise { return instance.put(url, data); }}

6、调用RequestAxios

这里也是以get请求为例，在封装好之后，发送请求就是如此简便，只需传入接口地址，以及请求参数即可 ，由于返回值Promise对象，可以直接使用async、await语法糖来获取返回值，也可以在

.then中获取返回值

 // 这里的地址是指除去请求基地址的接口地址 ，参数需要根据服务端接口文档进行修改 // 获取返回值方法1 const res = await RequestAxios.get(\'具体接口地址\',请求参数) // 获取返回值方法2 RequestAxios.get(\'具体接口地址\',请求参数) .then((res)=>{ // res即返回值 }) 

最后附上完整axios工具：

import axios, { AxiosError, AxiosResponse, InternalAxiosRequestConfig } from \'@ohos/axios\';import { promptAction } from \'@kit.ArkUI\';// 创建Axios实例export const instance = axios.create({ // 请求基地址 替换为自己项目的请求基地址 baseURL: \'https://xxxxxxx\',});// 请求拦截器 发请求之前进入这里instance.interceptors.request.use((config: InternalAxiosRequestConfig) => { // 这里可以对请求参数进行修改 比如请求头自动注入token return config;}, (error: AxiosError) => { return Promise.reject(error);});// 响应拦截器instance.interceptors.response.use((response: AxiosResponse) => { // 响应成功进入这里 // 这里根据自己业务码进行判断 比如code为\'ok\'则返回数据 否则弹出错误提示 if (response.data.code ===\'网络请求成功码\') { return response.data.data; } // 提示错误信息 msg字段根据自己服务端返回的字段进行修改 promptAction.showToast({ message: response.data.msg }); return Promise.reject(new Error(response.data.msg));}, (error: AxiosError) => { // 请求失败进入这里 // 这里可以根据自己的业务逻辑进行修改 比如判断错误码进行错误提示 401 404 等等 const res = error.response?.data as object; if (res) { // 提示服务端返回的错误信息 promptAction.showToast({ message: res[\"msg\"] }); } return Promise.reject(error);});export class RequestAxios { // get请求 static get(url: string, params?: object): Promise { return instance.get(url, { params }); } // post请求 static post(url: string, data?: object): Promise { return instance.post(url, data); } // delete请求 static delete(url: string, data?: object): Promise { return instance.delete(url, { data }); } // put请求 static put(url: string, data?: object): Promise { return instance.put(url, data); }}