HarmonyOS Next开发实战： 基于Axios对网络请求进行二次封装

一、准备工作

• 安装好最新DevEco Studio 开发工具,创建一个新的空项目。

• 下载安装 @ohos/axios。

在项目对应模块下oh-package.json5文件 dependencies中输入"@ohos/axios": "2.2.2"

完成后参考下图点击执行 Sync Now 进行安装

• 创建网络请求工具文件 ets/utils/request.ets
• 创建统一管理接口文件 ets/api/index.ets

二、利用axios的create方法创建 axios 实例

这里的作用主要有下面三个：

• 配置我们全局公共的网络请求前缀 baseURL。
• 配置统一的超时时间 timeout。
• 配置公共的统一 headers。

import axios,{InternalAxiosRequestConfig, AxiosResponse,AxiosError,AxiosRequestConfig,AxiosInstance} from '@ohos/axios';
// 创建实例
const instance: AxiosInstance = axios.create({
  baseURL: 'http://XXX.XX.XX.XX', //修改为自己项目的实际地址
  timeout: 10000,//超时
  headers: { 'Content-Type': 'application/json' },
 
// `transformRequest` 允许在向服务器发送前，修改请求数据 一般来说用不到，只要后端同志是正常的
// 它只能用于 'PUT', 'POST' 和 'PATCH' 这几个请求方法
// 数组中最后一个函数必须返回一个字符串， 一个Buffer实例，ArrayBuffer，FormData，或 Stream
// 你可以修改请求头。
// transformRequest: [(data: ESObject, headers: AxiosRequestHeaders) => {
//   // 对发送的 data 进行任意转换处理
//   // console.log('api1Result出零四',data)
//   // return data
// }],

});

三、配置添加请求拦截器

这里运用最多的场景也就是把身份信息Token放入到header中携带过去传到后端。 这里还涉及到缓存信息，这个每个项目都有自己的考量，我在项目中一般用的腾讯的@tencent/mmkv,体验感还不错。

// 请求拦截器
instance.interceptors.request.use((config:InternalAxiosRequestConfig) => {
  // 对请求数据做点什么
  const  token = 'eyJhbw'//自己根据自己项目实际情况获取
  if(token){
    config.headers['token']=token //设置token
  }
  return config;
}, (error:AxiosError) => {
  // 对请求错误做些什么 
  return Promise.reject(error);
});