鸿蒙Next API 12开发，利用@ohos/axios进行HTTP请求

创建了一个名为 HttpRequest 的类，它封装了 axios 的功能，并添加了请求和响应拦截器以处理一些通用的请求和响应逻辑。这个类提供了多种 HTTP 方法（GET、POST、PUT、DELETE）以及用于发送请求并处理响应数据的方法。以下是对您的代码的一些观察和潜伏改进建议：

• 导入模块：
  
  
  
  • 您从 @ohos/axios 导入了 axios。请留意，通常 axios 是从 axios 包自己导入的，而不是从 @ohos/axios。除非您正在利用特定于 OHOS（OpenHarmony）的 axios 版本，否则您可能需要检查这一点。
    
  
  
• 请求拦截器：
  
  
  
  • 您在请求拦截器中添加了多个自定义头，并生成了 requestId 和签名。这是一个很好的做法，可以增强请求的安全性。
    
  • 您设置了 validateStatus 函数来允许所有状态码小于 500 的请求通过。这意味着即使服务器返回 4xx 错误，它们也会被视为成功的响应，除非您在响应拦截器中进一步处理它们。
    
  
  
• 响应拦截器：
  
  
  
  • 您在响应拦截器中记录了响应和错误。这是一个很好的调试工具。
    
  • 对于错误处理，您检查了 error.response 是否存在，并据此决定如何构建要拒绝的 BusinessError 对象。这是一个合理的做法。
    
  
  
• 方法实现：
  
  
  
  • 您为不同的 HTTP 方法（GET、POST、PUT、DELETE）提供了单独的包装器方法，这些方法设置了 config.method 并调用了 request 或 requestForData。这是一个很好的封装，使得利用这些方法时不需要每次都指定方法类型。
    
  • postData 方法似乎是多余的，由于它只是调用了 post 方法并剖析了 .data 属性。如果 post 方法已经返回了 .data（通过 requestForData），则 postData 可以被移除或重构为直接调用 requestForData。
    
  
  
• 错误处理：
  
  
  
  • 您在 catch 块中处理了错误，并根据错误类型构建了不同的 BusinessError 对象。这是一个很好的做法，由于它允许调用者根据错误类型采取不同的举措。
    
  • 请留意，如果服务器返回的错误不包含 detailMessage 或 message 字段，则您的错误对象可能会包含 undefined 值。您可能需要添加一些默认值或额外的检查来处理这种情况。
    
  
  
• 代码重构：
  
  
  
  • 思量将 request 和 requestForData 方法中的重复逻辑（如错误处理）提取到单独的私有方法中，以淘汰代码冗余并提高可维护性。
    
  
  
• 类型安全：
  
  
  
  • 您已经利用了 TypeScript，这是一个很好的选择，由于它提供了类型安全。确保所有类型定义都是准确的，并且与您的业务逻辑保持一致。
    
  
  
• 测试：
  
  
  
  • 思量为您的 HttpRequest 类编写单元测试，以确保其行为符合预期。这可以帮助您在更改代码时捕获潜伏的问题。
    
  
  

总的来说，您的代码布局清晰，逻辑合理。通过一些小的改进和重构，您可以进一步提高其健壮性和可维护性。
这段代码定义了几个TypeScript接口，用于形貌在Web开发或API交互中可能利用的数据布局。下面是对这些接口的解释：

• BaseResponse 接口：
  
  
  
  • code: 一个数字，通常用于体现操作的状态码，比方200体现成功，4xx体现客户端错误，5xx体现服务器错误。
    
  • detailMessage: 一个字符串，提供关于响应的具体消息或错误形貌。
    
  • message: 一个字符串，提供响应的简短形貌或错误消息。
    
  • status: 一个数字，通常与code相似，用于体现HTTP状态码。
    
  • success: 一个布尔值，体现操作是否成功。
    
  • timestamp: 一个字符串，体现响应生成的时间戳。
    
  
  
• BaseResponseModel 接口：
  
  
  
  • 这个接口继续自BaseResponse接口，并添加了一个可选的data属性。
    
  • data?: 一个泛型T，体现响应中携带的数据。由于它是可选的，以是即使没有数据，这个接口也可以被利用。
    
  • 泛型T允许BaseResponseModel接口用于不同类型的响应数据，提高了接口的机动性和复用性。
    
  
  
• RejectError 接口：
  
  
  
  • 这个接口继续自BaseResponse接口，并添加了三个额外的属性，用于形貌一个拒绝或错误的具体情况。
    
  • path: 一个字符串，体现出错时请求的路径。
    
  • error: 一个字符串，提供错误的具体形貌。
    
  • requestId: 一个字符串，体现请求的唯一标识符，可以用于日志追踪或调试。
    
  
  

这些接口的筹划体现了面向接口编程的思想，使得代码更加模块化、易于维护和扩展。通过定义明白的接口，可以确保不同部分之间的数据交互符合预期，淘汰了错误和调试的难度。此外，利用泛型T提高了代码的复用性和机动性，使得BaseResponseModel接口可以顺应多种不同类型的数据响应。

1. /**
2. * @Title HttpRequest
3. * @Description
4. * @Author
5. * @create
6. */
7. import axios,
8. { AxiosInstance,
9.   InternalAxiosRequestConfig,
10.   AxiosRequestConfig,
11.   AxiosError,
12.   AxiosResponse
13. } from '@ohos/axios';
14. import { Logger } from 'commlib'
16. import { BaseResponseModel, RejectError } from './Types'
17. import { NetworkUtil } from './util/NetworkUtil';
18. import { NetworkConstants } from './constants/NetworkConstants';
19. import { BusinessError } from '@kit.BasicServicesKit';
21. const MAX_RETRIES = 3;
22. const TAG = '[HttpRequest]';
24. class HttpRequest {
25.   service: AxiosInstance
27.   constructor() {
28.     this.service = axios.create({
29.       baseURL: 'https://www.baidu.com',
30.       timeout: 10 * 1000
31.     });
33.     // 请求拦截
34.     this.service.interceptors.request.use(
35.       async (config: InternalAxiosRequestConfig) => {
36.         Logger.debug('[Request]', `url=${config.baseURL || ''}${config.url || ''}, params=${JSON.stringify(config.data)}`)
38.         const requestId = NetworkUtil.makeUUID()
39.         const timestamp = Date.parse(new Date().toString())
41.         config.headers['Content-Type'] = 'application/json'
42.         config.headers['timestamp'] = timestamp
43.         config.headers['appKey'] = NetworkUtil.getAppKey()
44.         config.headers['requestId'] = requestId
45.         config.headers['sign'] = await NetworkUtil.signText(NetworkConstants.API_SECRET + timestamp + requestId)
46.         config.headers['App-Version'] = NetworkConstants.APP_VERSION
47.         config.headers['App-Source'] = NetworkConstants.APP_SOURCE
48.         config.validateStatus = (status) => status < 500
49.         return config
50.       },
51.       (error: AxiosError) => {
52.         return Promise.reject(error);
53.       }
54.     );
55.     // 响应拦截
56.     this.service.interceptors.response.use(
57.       (response: AxiosResponse) => {
58.         Logger.debug('[Response]', JSON.stringify(response))
59.         return response
60.       }, (error: AxiosError) => {
61.         Logger.debug('[Error]', JSON.stringify(error))
62.         return Promise.reject(error);
63.       }
64.     );
65.   }
67.   request<T>(config: AxiosRequestConfig): Promise<BaseResponseModel<T>> {
68.     return new Promise((resolve: (value: BaseResponseModel<T>) => void, reject: (reason?: BusinessError<RejectError>) => void) => {
69.       this.service.request<BaseResponseModel<T>>(config)
70.         .then((response: AxiosResponse<BaseResponseModel<T>>) => {
71.           resolve(response.data as BaseResponseModel<T>);
72.         })
73.         .catch((error: AxiosError) => {
74.           if (error.response?.data != undefined) {
75.             // reject(error.response?.data as RejectError)
76.             let result = error.response?.data as RejectError
77.             reject({
78.               code: -1,
79.               message: result.detailMessage,
80.               name: result.message,
81.               data: result,
82.             });
83.           } else {
84.             reject({
85.               code: -1,
86.               message: 'AxiosError',
87.               name: '网络异常',
88.             })
89.           }
90.         })
91.     });
92.   }
94.   requestForData<T>(config: AxiosRequestConfig): Promise<T> {
95.     return new Promise((resolve: (value: T) => void, reject: (reason?: RejectError) => void) => {
96.       this.service.request<BaseResponseModel<T>>(config)
97.         .then((response: AxiosResponse<BaseResponseModel<T>>) => {
98.           resolve(response.data.data!);
99.         })
100.         .catch((error: AxiosError) => {
101.           reject(error.response?.data as RejectError)
102.         })
103.     });
104.   }
106.   get<T>(config: AxiosRequestConfig): Promise<BaseResponseModel<T>> {
107.     config.method = 'GET'
108.     return this.request<T>(config)
109.   }
110.   post<T>(config: AxiosRequestConfig): Promise<BaseResponseModel<T>> {
111.     config.method = 'POST'
112.     return this.request<T>(config)
113.   }
114.   postForData<T>(config: AxiosRequestConfig): Promise<T> {
115.     config.method = 'POST'
116.     return this.requestForData<T>(config)
117.   }
118.   put<T>(config: AxiosRequestConfig): Promise<BaseResponseModel<T>> {
119.     config.method = 'PUT'
120.     return this.request<T>(config)
121.   }
122.   delete<T>(config: AxiosRequestConfig): Promise<BaseResponseModel<T>> {
123.     config.method = 'DELETE'
124.     return this.request<T>(config)
125.   }
126.   postData<T>(config: AxiosRequestConfig): Promise<T> {
127.     return new Promise((resolve: (result: T) => void, reject: (error: RejectError) => void) => {
128.       this.post<T>(config).then((result: BaseResponseModel<T>) => {
129.         resolve(result.data!)
130.       }).catch((error: RejectError) => {
131.         reject(error);
132.       })
133.     })
134.   }
135. }
137. const httpRequest = new HttpRequest()
138. export default httpRequest;

复制代码

1. /**
2. * @Title Types
3. * @Description
4. * @Author
5. * @create
6. */
8. export interface RejectError extends BaseResponse {
9.   path: string
10.   error: string
11.   requestId: string
12. }
14. export interface BaseResponseModel<T> extends BaseResponse {
15.   data?: T
16. }
17. interface BaseResponse {
18.   code: number
19.   detailMessage: string
20.   message: string
21.   status: number
22.   success: boolean
23.   timestamp: string
24. }

复制代码

1. /**
2. * @Title NetworkUtil
3. * @Description
4. * @Author
5. * @create
6. */
8. import { util } from '@kit.ArkTS'
9. import { cryptoFramework } from '@kit.CryptoArchitectureKit'
10. import { NetworkConstants } from '../constants/NetworkConstants'
12. export class NetworkUtil {
13.   public static async signText(rawStr: string): Promise<string> {
14.     let data = new util.TextEncoder().encodeInto(rawStr)
16.     let sha1 = cryptoFramework.createMd('SHA1')
17.     await sha1.update({ data: data })
18.     const dataBlob = await sha1.digest()
19.     const result = NetworkUtil.uint8ArrayToHexStr(dataBlob.data)
21.     return result
22.   }
24.   private static uint8ArrayToHexStr(data: Uint8Array): string {
25.     let hexString = "";
26.     let i: number;
27.     for (i = 0; i < data.length; i++) {
28.       let char = ('00' + data[i].toString(16)).slice(-2);
29.       hexString += char;
30.     }
31.     return hexString;
32.   }
34.   public static makeUUID(): string {
35.     const result: string = util.generateRandomUUID(false).replace(/-/g, '')
36.     return result
37.   }
38.   public static getAppKey(): string {
39.     return NetworkConstants.API_KEY
40.   }
41.   public static getAppSecret(): string {
42.     return NetworkConstants.API_SECRET
43.   }
44. }

复制代码

1. /**
2. * @Title NetworkConstants
3. * @Description
4. * @Author 贾少英
5. * @create 2024/3/27
6. */
7. export class NetworkConstants {
8.   static readonly API_KEY: string = ''
9.   static readonly API_SECRET: string = ''
10.   static readonly APP_SOURCE: string = 'HarmonyOS'
11.   static readonly APP_VERSION: string = '1.0.1'
12. }

复制代码

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