HarmonyOS NEXT - 電商App實例三（網絡請求axios）

????????使用axios開發網絡請求是一個非常常見的任務，尤其是Web前端開發者，對它非常熟悉。axios是一個基于Promise的HTTP客戶端，支持瀏覽器和Node.js環境，使用簡單且功能強大。

? ? ? ? 在harmonyOS中，如果想使用axios，可以通過ohpn工具包下載安裝。

? ? ? ? 接下來，將通過axios庫，對其進行二次封裝，并向后臺發送請求，完成banner數據的獲取。

一、基本使用

1.1 下載 ohpm工具包

? ? ? ? HarmonyOS開發工具DevEco Studio，最新版本DevEco Studio 5.0.1 Release安裝時，ohpm工具已包含。如果是版本較低，需要手動進行安裝，可以查看之前寫的一篇關于這方面內容，地址：HarmonyOS開發 - ohpm環境變量配置-CSDN博客。

1.2 下載axios

? ? ? ? 命令如下：

ohpm install @ohos/axios

? ? ? ? 安裝成功后，oh_modules目錄則可以看到@ohos/axios。如下圖：

1.3 導入模塊

import axios from '@ohos/axios'

1.4 發送GET請求

????????首先，我們先看下@ohos/axios的基本用法，使用axios模塊發送一個GET請求，處理響應。示例代碼如下：

// 導入模塊
import axios from '@ohos/axios'// 發送 GET 請求
axios.get('https://api.example.com/data').then(response => {console.log('Response Data:', response.data);}).catch(error => {console.error('Error:', error.message);});

1.5 配置項

? ? ? ? axios允許通過配置對象來自定義請求，一些常見的配置選項如下：

{method: 'get', // 請求方法 (get, post, put, delete 等)url: 'https://api.example.com/data', // 請求 URLheaders: {'Authorization': 'Bearer your_access_token', // 自定義請求頭'Content-Type': 'application/json'},params: {key: 'value' // URL 參數 (用于 GET 請求)},data: {key1: 'value1',key2: 'value2'}, // 請求體 (用于 POST/PUT 請求)timeout: 5000 // 請求超時時間 (毫秒)
}

1.6 處理響應

? ? ? ? 參數說明如下：

名稱	類型	描述
status	number	http響應狀態碼
statusText	string	http狀態信息
headers	Object	響應頭
data	any	服務端返回的響應體
config	Object	請求的配置信息

1.7 錯誤處理

????????參數說明如下：

名稱	類型	描述
message	string	錯誤信息
response	Object	服務器的響應
request	Object	請求對象
config	Object	請求的配置信息

二、axios庫

? ? ? ? axios是一個非常強大且易于使用的Http客戶端，適用于大多數網絡請求。通過掌握axios，可以輕松使用它開發網絡請求，并處理各種復雜的需求。

2.1 @ohos/axios實例

? ? ? ? 如果需要為不同的API設置不的配置，可以創建一個axios實例，代碼如下：

import axios from '@ohos/axios'const axiosInstance = axios.create({baseURL: "http://test.shop.com",headers: {'Content-Type': 'application/json'}
})

2.2 攔截器

? ? ? ? axios提供了請求和響應攔截器，可以在請求發送前或響應到達后對其進行處理。

2.2.1 請求攔截器

? ? ? ? 在項目中，一些API請求需要訪問令牌（即證明登錄的一串字符串），為了方便，可以在攔截器中統一添加。示例代碼如下：

// 請求攔截器
axiosInstance.interceptors.request.use(config => {// 在請求發送前做一些處理config.headers['accessToken'] = 'kl1ad1234214dfasdfas'  // 添加訪問令牌return config;
}, error => {return Promise.reject(error);
});

2.2.2 響應攔截器

? ? ? ? 在電商項目中，例如下單功能，必須為登錄狀態；此時，如果用戶在未登錄狀態下點擊購買，須跳轉到登錄界面或給用戶相關提示信息；

????????除了下單功能，我的界面，訂單列表、詳單詳情、我的收藏等，都是需要用戶在登錄狀態下進行操作；所以，此時我們可以在響應攔截器中，做統一處理，當接收到登錄失效或未登錄的狀態碼時，作出相應操作。攔截器代碼如下：

// 響應攔截器
axiosInstance.interceptors.response.use(response => {// 在響應到達后做一些處理if (response.status == 400) {// 如果400表示登錄失效，訪問頁面必須為登錄狀態，此時程序須做跳轉到登錄界面，或提示操作}return response;
}, error => {return Promise.reject(error);
});

2.3?any 和 unknown問題

? ? ? ? ?在ArkTS中，使用 @ohos/axios 發起網絡請求時，如果遇到 arkts-no-any-unknown 錯誤（Use explicit types instead of "any", "unknown" (arkts-no-any-unknown) <ArkTSCheck>。），說明代碼中使用了 any 或 unknown 類型，而 ArkTS 要求使用顯式類型以提高代碼的類型安全性。

? ? ? ? 這個問題，在上篇@ohos.net.http請求封裝中也存在，并將其解決。如需了解的朋友，可以前去查看，地址：HarmonyOS開發 - 電商App實例二（網絡請求http）-CSDN博客。

2.4 定義接口? ? ? ??

????????所以在封裝axios請求前，為避免使用 any 和 unknown，并確保類型安全。將請求和響應的數據定義為明確的接口。示例代碼如下：

import { Method } from '@ohos/axios'// http定義請求參數接口
interface axiosRequestOptions {url: string;method?: Method,headers?: Record<string, string>;data?: Record<string, any>;params?: Record<string, any>;timeout?: number
}// http定義響應數據接口
interface axiosHttpResponse<T> {responseCode: number;result: T;
}

2.5 @ohos/axios封裝

????????為了簡化代碼并提高復用性，可以將@ohos/axios封裝成一個工具類。先在ets目錄下創建utils目錄，再創建axiosUtil類（路徑：ets/utils/axiosUtil.ts）。使用顯式類型替代 any 和 unknown，代碼如下：

import axios, { AxiosInstance, Method } from '@ohos/axios'
import { axiosRequestOptions } from '../types/http';export class axiosUtil {private base_url: string = '';  // 基礎路徑private headers: Record<string, string> | null = null; // header信息private axiosRequest: AxiosInstance; // request請求constructor(base_url?: string, headers?: Record<string, string>) {this.base_url = base_urlthis.headers = headers// axios實例this.axiosRequest = axios.create({baseURL: this.base_url,headers: this.headers})}/*** 發送 http 請求* @param options 請求配置* @returns 返回響應數據*/public async request<T> (options: axiosRequestOptions): Promise<T> {const { url, method = 'GET', headers = {}, params, data } = options;try {const response = await this.axiosRequest({url,method,headers,params,data});if (response.status === 200) {return response.data as T; // 顯式類型斷言} else {throw new Error(`HTTP Error: ${response.status}`);}} catch (error) {throw new Error(`Request Failed: ${error.message}`);}}/*** 發送 GET 請求* @param url 請求地址* @param params URL 參數* @param headers 請求頭* @returns 返回響應數據*/public async get<T>(url: string, params?: Record<string, any>, headers: Record<string, string> = {}): Promise<T> {return this.request<T>({ url, method: 'GET', headers, params });}/*** 發送 POST 請求* @param url 請求地址* @param data 請求體* @param headers 請求頭* @returns 返回響應數據*/public async post<T>(url: string, data: Record<string, any>, headers: Record<string, string> = {}): Promise<T> {return this.request<T>({ url, method: 'POST', headers, data });}
}

2.6 實例axiosUtil類

????????在utils目錄中，再創建request請求文件（路徑：ets/utils/request.ts），用于初始化http請求的基礎路徑和header請求類型信息。示例代碼如下

import { axiosUtil } from './axiosUtil'
/*** 初始化請求 實例類*/
export const axiosRequest = new axiosUtil('http://test.shop.com', {'Content-Type': 'application/json'
})

2.7 api請求

????????在api目錄創建，創建index.ts文件，用于定義具體業務請求函數。這里向后臺發送一個GET請求，用于獲取banner信息。示例代碼如下：

import { axiosRequest } from '../utils/request'
interface apiBanner {id: number;name: string;thumb: string;uid: number;createTime: Date;updateTime: Date;
}/*** 獲取banner信息*/
export const getBannerInfo = async () => {return await axiosRequest.get<apiBanner>('/banner.php')
}

2.8 獲取Banner信息

? ????????如下圖，在頁面中添加按鈕，點擊“獲取banner信息”，向后臺發送GET請求，獲取banner數據。

? ? ? ? 打開pages/index.ets 頁面文件，添加http請求。代碼如下：

import { getBannerInfo } from '../api/index'@Entry
@Component
struct Index {@State bannerMessage: string = '';build() {RelativeContainer() {Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center }){Text(this.bannerMessage)Button('獲取banner信息').onClick(async () => {console.log('tag')await getBannerInfo().then(res => {this.bannerMessage = JSON.stringify(res)console.log('tas success', res)}).catch(() => {console.error('Error')})})}.width('100%')}.height('100%').width('100%')}
}

? ? ? ?

?????????此時，在頁面中點擊按鈕，獲取banner信息。如下圖：