在鸿蒙客户端开发过程中，客户端和服务器进行数据交互，必然会使用到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<T>, D = any> 这里可以看到返回值类型为Promise<R> 也就是说这个方法最终得到的数据是一个Promise<R>的对象，开发者在传入类型时，R类型会将T类型覆，

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

在这里导出了一个RequestAxios类

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

export class RequestAxios {
  
  static get<T>(url: string, params?: object): Promise<T> {
    return instance.get<null, T>(url, { params });
  }

  static post<T>(url: string, data?: object): Promise<T> {
    return instance.post<null, T>(url, data);
  }

  static delete<T>(url: string, data?: object): Promise<T> {
    return instance.delete<null, T>(url, { data });
  }

  static put<T>(url: string, data?: object): Promise<T> {
    return instance.put<null, T>(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<T>(url: string, params?: object): Promise<T> {
    return instance.get<null, T>(url, { params });
  }
 // post请求
  static post<T>(url: string, data?: object): Promise<T> {
    return instance.post<null, T>(url, data);
  }
 // delete请求
  static delete<T>(url: string, data?: object): Promise<T> {
    return instance.delete<null, T>(url, { data });
  }
  // put请求
  static put<T>(url: string, data?: object): Promise<T> {
    return instance.put<null, T>(url, data);
  }
}