IT评测·应用市场-qidao123.com

标题: 鸿蒙Harmony应用开辟，数据驾驶舱网络请求（Axios） 封装 [打印本页]

---

作者: 怀念夏天    时间: 2024-10-7 05:57
标题: 鸿蒙Harmony应用开辟，数据驾驶舱网络请求（Axios） 封装
鸿蒙Harmony应用开辟，数据驾驶舱网络请求（Axios） 封装

在进行网络请求的封装之前，先来分析一下我们项目所用到的接口的基本环境: 1. 在请求的接口中添加了署名。
2.在非登录接口中添加了token。 基于以上基本的环境。我们开始来对Axios做封装。
首先我们必要在根目录的oh-package.json5文件的dependencies中添加 axios的依靠

1. "@ohos/axios": "^2.1.1",

复制代码

前面我们已经介绍了我们的接口请求中的2个必要因素是署名和token，如今我们开始对这2块的实现开始介绍

• 署名的生成
  我们的署名是将当前所有的请求参数加被骗前的时间戳来生成的署名，以是们把请求中的参数做遍历放到一个数组中
  在添加一个当前时间戳，以及生成的署名作为新的请求参数
  

1. private generateSignature(params: RequestParams): RequestParams {
2.   const time = Date.now().toString().substr(0, 10);
3.   let str = pref + "&";
4. ​
5.   const allParams: RequestParams = {};
6.   Object.keys(params).forEach((key) => {
7.    allParams[key] = params[key];
8.   });
9.   allParams['timestamp'] = time;
10. ​
11.   const sortedKeys = Object.keys(allParams).sort();
12. ​
13.   sortedKeys.forEach((key) => {
14.    const value = allParams[key];
15.    if (typeof value !== 'object' && value !== null) {
16.      if (key === "timestamp") {
17.        str += `${key}=${time}&`;
18.      } else if (key !== "sign") {
19.        str += `${key}=${decodeURIComponent(String(value))}&`;
20.      }
21.    }
22.   });
23.   str += suff;
24.   allParams['sign'] = CryptoJS.MD5(str).toString()
25.   return allParams
26. }

复制代码

• 请求头token
  我们在登录接口获取到token后存储到preferences中，然后在再请求头添加类似的代码
  
  1. headers.set('Authorization', token);

  复制代码

接下来我们创建一个PolarisHttp.ets开始对基本的get ,post ,put,patch等方法的封装
首先我们必要创建一个网络请求对象 PolarisHttpRequest，定义基础的变量

1. config: HttpRequestConfig;  //请求配置参数
2. interceptorHooks?: InterceptorHooks; //拦截器
3. instance: AxiosInstance; //阿修罗实例

复制代码

阿修罗网络请求核心代码:

1. request<T = CommonType>(config: HttpRequestConfig): Promise<T> {
2.   return new Promise<T>((resolve, reject) => {
3.    this.instance
4.      .request<CommonType, T>(config)
5.      .then(res => {
6.        resolve(res);
7.      })
8.      .catch((err: Error) => {
9.        LogUtils.error("网络请求Request异常：", err.toString());
10.        if (err instanceof AxiosError) {
11.          showToast(err.message)
12.        }
13.        reject(err);
14.      });
15.   });
16. }

复制代码

• GET 请求封装:
  
  1. public get<T = CommonType>(config: HttpRequestConfig): Promise<T> {  // 确保 params 存在  if (!config.params) {    config.params = {};  }​  const allParams: RequestParams = this.generateSignature(config.params);  // Object.keys(config.params).forEach(key => {  //   allParams[key] = config.params[key];  // });  // 创建新的 headers 对象  const headers = new AxiosHeaders(config.headers);  return new Promise<T>((resolve, reject) => {    const getTokenAndSendRequest = () => {      if (!config.isLoginState) {        UserLoginHelper.getUserToken().then(token => {          if (token && typeof token === 'string') {            LogUtils.error('网络请求Request Authorization', token);            headers.set('Authorization', token);
  2.          } else {            LogUtils.error('网络请求Request 请求未获取的Token信息');          }          sendRequest();        }).catch(reject);      } else {        sendRequest();      }    };    const sendRequest = () => {      // 构建新的配置对象      const newConfig: HttpRequestConfig = {        method: 'GET',        url: config.url,        params: allParams,        headers: headers,        data: config.data,        timeout: config.timeout,        responseType: config.responseType      };      // 发送请求      this.request<T>(newConfig).then(resolve).catch(reject);    };    getTokenAndSendRequest();  });}

  复制代码
• POST请求封装:
  
  1. public post<T = CommonType>(config: HttpRequestConfig): Promise<T> {  // 确保 data 存在  if (!config.data) {    config.data = {};  }  let allData: RequestParams = {};  // 复制原有数据  Object.keys(config.data).forEach(key => {    allData[key] = config.data[key];  });  // 使用 generateSignature 方法生成署名  allData = this.generateSignature(allData);  // 创建新的 headers 对象  const headers = new AxiosHeaders(config.headers);​  // 使用Promise来处置惩罚异步token获取  return new Promise<T>((resolve, reject) => {    const getTokenAndSendRequest = () => {      if (!config.isLoginState) {        LogUtils.error('网络请求Request--Authorization...token..!config.isLoginState');        UserLoginHelper.getUserToken().then(token => {          if (token && typeof token === 'string') {            LogUtils.error('网络请求Request--Authorization', token);            headers.set('Authorization', token);
  2.          } else {            LogUtils.error('网络请求Request--Authorization--请求未获取的Token信息');          }          sendRequest();        }).catch(reject);      } else {        LogUtils.error('网络请求Request--Authorization...token..config.isLoginState');        sendRequest();      }    };    const sendRequest = () => {      // 构建新的配置对象      const newConfig: HttpRequestConfig = {        method: 'POST',        url: config.url,        data: allData,        headers: headers,        timeout: config.timeout,        responseType: config.responseType      };      // 发送请求      this.request<T>(newConfig).then(resolve).catch(reject);    };    getTokenAndSendRequest();  });​​  // // 构建新的配置对象  // const newConfig: HttpRequestConfig = {  //   method: 'POST',  //   url: config.url,  //   data: allData,  //   headers: headers,  //   timeout: config.timeout,  //   responseType: config.responseType  // };  // // 返回请求  // return this.request<T>(newConfig);}

  复制代码

我们可以看到上述的get 请求和post请求都用了2次回调，因为我们的 preferences数据的获取是一个异步过程（因为js我不是很熟悉如果你有好的实现，也可以分享下） 我们必要先异步获取到token 然后在添加到请求头中当中去.
使用示例

1. const httpClient = new PolarisHttpRequest({
2.  baseURL: 'https://api.example.com',
3.  timeout: 5000,
4.  interceptorHooks: {
5.    requestInterceptor: (config) => {
6.      // 请求拦截逻辑
7.      return config;
8.    },
9.    responseInterceptor: (response) => {
10.      // 响应拦截逻辑
11.      return response;
12.    }
13.   }
14. });
15. ​
16. // GET请求示例
17. httpClient.get<ApiResponse<UserInfo>>({
18.  url: '/user/info',
19.  params: { userId: 123 }
20. }).then(response => {
21.  console.log(response.data);
22. }).catch(error => {
23.  console.error(error);
24. });
25. ​
26. // POST请求示例
27. httpClient.post<ApiResponse<LoginResult>>({
28.  url: '/user/login',
29.  data: { username: 'example', password: 'password' }
30. }).then(response => {
31.  console.log(response.data);
32. }).catch(error => {
33.  console.error(error);
34. });

复制代码

注意事项

• 确保在使用前精确配置baseURL和其他必要的选项。
  
• generateSignature方法使用了特定的署名算法，请根据实际需求调整。
  
• 对于差别的环境（开辟、测试、生产），大概必要差别的配置，发起使用环境变量或配置文件管理。
  

至此，您可以在ArkTS应用中更加方便地管理和发送HTTP请求，同时保证了请求的安全性和一致性。封装类提供的拦截器和错误处置惩罚机制可以大大简化API调用的复杂度。
完整项目下载地点

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

---

欢迎光临 IT评测·应用市场-qidao123.com (https://dis.qidao123.com/)

Powered by Discuz! X3.4