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信息。如下图：