This content originally appeared on DEV Community and was authored by victordeng
reference material:
https://ohpm.openharmony.cn/#/cn/detail/@ohos%2Faxios
What is Axios?
Axios is a promise based network request library that works on Node.js and browsers. It is polymorphic (i.e. the same set of code can run in both the browser and Node.js). On the server side, it uses the native Node.js HTTP module, while on the client side (browser side), it uses XMLHttpRequests.
Introduction to Axios of HarmonyOS Third Party Library:
This is a promise based network request library that can run Node.js and in browsers. This library is adapted based on the Axios original library v1.3.4 version, allowing it to run on OpenHarmony while retaining its existing usage and features.
- HTTP request
- Promise API
- Request and response interceptors
- Convert the data of request and response
- Automatically convert JSON data data
Initiate a GET request:
Axios supports generic parameters, but since ArkTS no longer supports any type, the specific type of the parameter needs to be specified. For example: Axios.get, D=any>(URL)
- T: It is a response data type. When sending a POST request, the client may receive a JSON object. T is the type of this JSON object. By default, T is any, which means it can receive any type of data.
- R: It is the type of response body. When the server returns a response, the response body is usually a JSON object. R is the type of this JSON object. By default, R is AxiosResponse, which means that the response body is an AxiosResponse object with a data property of type T
- D: It is the type of request parameter. When sending a GET request, some query parameters may be added to the URL. D is the type of these query parameters. When the parameter is empty, D is of null type.
app store
ohpm install @ohos/axios
Permission required
ohos.permission.INTERNET
Modify the modular.json5 configuration file to add network permissions:
"requestPermissions": [
{
"name": "ohos.permission.INTERNET"
}
]
Create BaseRequest utility class
import axios, { AxiosInstance, AxiosRequestConfig, AxiosResponse } from '@ohos/axios'
import { promptAction } from '@kit.ArkUI'
class BaseRequest {
instance: AxiosInstance;
//构造器
constructor(config: AxiosRequestConfig<AxiosResponse>) {
this.instance = axios.create(config);
// 请求拦截
this.instance.interceptors.request.use((config) => {
const token = '获取自己本地储存的token';
if (token) {
config.headers.token = token;
}
console.log('Request config', config);
return config;
}, (err) => {
console.error('Request error', err);
return Promise.reject(err);
}
);
// 响应拦截
this.instance.interceptors.response.use((response: AxiosResponse<any, any>) => {
let data = response.data;
console.log('Response data', data);
if (typeof data === 'string') {
data = JSON.parse(data.trim());
}
const { code, msg } = data;
if (code === 200) { // 处理成功情况
return response.data;
} else if (code === 400) { // 处理错误码
promptAction.showToast({
message: msg
});
return Promise.reject(new Error(msg));
} else if (code === 500) {
promptAction.showToast({
message: msg
});
return response.data;
} else { // 处理其他错误码
promptAction.showToast({
message: msg
});
return Promise.reject(new Error(msg));
}
}, (err) => {
console.error('Response error', err);
return Promise.reject(err);
}
);
}
request<T = any>(config: AxiosRequestConfig): Promise<T> {
console.log('Request config', config);
return this.instance.request<any, T>(config);
}
get<T = any>(config: AxiosRequestConfig): Promise<T> {
return this.request<T>({ ...config, method: 'GET' });
}
post<T = any>(config: AxiosRequestConfig): Promise<T> {
return this.request<T>({ ...config, method: 'POST' });
}
}
export const axiosAPI = new BaseRequest ({
baseURL: '自己接口地址',
timeout: 60000
})
call
import { axiosAPI } from '../BaseRequest'
export const getList = (id:string) =>{
return axiosAPI.get<object>({url:'自己的请求地址',
params:{
"id":id
}})
}
This content originally appeared on DEV Community and was authored by victordeng
victordeng | Sciencx (2025-06-29T09:04:26+00:00) HarmonyOS NEXT project practice：import and use axios. Retrieved from https://www.scien.cx/2025/06/29/harmonyos-next-project-practice%ef%bc%9aimport-and-use-axios/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.