鸿蒙开发axios超具体解析，以及完备封装，一次封装终身可用，小白都能上手 ...

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

OpenHarmony三方库中心仓

https://ohpm.openharmony.cn/#/cn/detail/@ohos%2Faxios在这统统的操作之前需要打开项目的网络权限，在项目的module.json5文件中设置

在module下面设置以下：

1. "requestPermissions": [
2.       {
3.         "name": "ohos.permission.INTERNET"
4.       }
5.     ]

复制代码

在项目终端运行以下下令安装axios工具包
   ohpm i @ohos/axios
  2、创建axios实例，写上基地址

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

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

复制代码

3、封装请求拦截器

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

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

复制代码

4、封装响应拦截器

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

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

复制代码

 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类

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

复制代码

1. export class RequestAxios {
2.   
3.   static get<T>(url: string, params?: object): Promise<T> {
4.     return instance.get<null, T>(url, { params });
5.   }
7.   static post<T>(url: string, data?: object): Promise<T> {
8.     return instance.post<null, T>(url, data);
9.   }
11.   static delete<T>(url: string, data?: object): Promise<T> {
12.     return instance.delete<null, T>(url, { data });
13.   }
15.   static put<T>(url: string, data?: object): Promise<T> {
16.     return instance.put<null, T>(url, data);
17.   }
18. }

复制代码

6、调用RequestAxios

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

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

复制代码

最后附上完备axios工具：

1. import axios, { AxiosError, AxiosResponse, InternalAxiosRequestConfig } from '@ohos/axios';import { promptAction } from '@kit.ArkUI';// 创建Axios实例
2. export const instance = axios.create({
3.   // 请求基地址 替换为自己项目的请求基地址
4.   baseURL: 'https://xxxxxxx',
5. });// 请求拦截器  发请求之前进入这里
6. instance.interceptors.request.use((config: InternalAxiosRequestConfig) => {
7.   // 这里可以对请求参数进行修改  比如请求头自动注入token
8.   return config;
9. }, (error: AxiosError) => {
10.   return Promise.reject(error);
11. });// 响应拦截器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);  }}

复制代码

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。