HarmonyOS-@ohos/axios网络请求

由于HarmonyOS官方提供的网络请求比较复杂，不太适用于项目管理，需要进行网络框架的封装。

主要使用较广的第三方网络请求框架有 @ohos/axios 和 @ohos/retrofit

@ohos/axios 主要偏向前端，和前端的axios很相似，对于前端开发者能够很快上手

@ohos/retrofit 主要偏向Android和其retrofit框架相似，主要通过注解的方式进行网络请求

下载安装

ohos/axios 的安装

1
ohpm install @ohos/axios

ohos/retrofit 的安装

1
ohpm install @ohos/retrofit

这里主要介绍 @ohos/axios 的封装使用

权限管理

1
ohos.permission.INTERNET

封装使用示例

首先我们需要创建一个request.arkts的文件，进行对base_url的管理。如果我们需要对业务逻辑处理的话，需要先对code,msg,data进行封装处理

1
2
3
4
5
interface BaseResponse<T>{
  code?:string,
  msg?:string,
  data:T
}

创建axios实例对象

1
2
3
4
5
6
7
8
const instance = axios.create({
  baseURL: 'http://10.159.36.81:5600/api',
  timeout: 30000,
  headers: {
    'Content-Type': 'application/json',
  },
});

添加请求拦截器

1
2
3
4
5
6
7
8
9
10
11
instance.interceptors.request.use((config:InternalAxiosRequestConfig)=>{
  const token = PreferencesUtil.get('token') as string
  if (token) {
    config.headers['Authorization'] = 'Bearer ' + token;
  }
  return config
}, (error:AxiosError) => {
  // 对请求错误做些什么
  console.error('request error:' + error);
  return Promise.reject(error);
})

添加响应拦截器

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
instance.interceptors.response.use((response: AxiosResponse) => {
  return response.data
}, (error: AxiosError) => {
  if (error.response) {
    // 处理已知错误
    console.error('Response Error:', error.response.data)
  } else if (error.request) {
    // 处理请求发送失败
    console.error('Request Error:', error.request)
  } else {
    // 处理其他错误
    console.error('Error:', error.message)
  }
  return Promise.reject(error)
})

进行导出以便调用

1
2
3
export default <T> (config:AxiosRequestConfig):Promise<BaseResponse<T>>=>{
  return instance(config)
}

网络请求示例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
interface LoginRequest{
  email:string,
  password:string
}

export interface LoginResponse{
  userid:string,
  username:string,
  email:string,
  avatar:string,
  sex?:string,
  token:string
}
export function login<T>(data:LoginRequest){
  return request<T>({
    url:'/users/login',
    method:'POST',
    data
  })
}

下面是在登录界面进行使用的demo

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

private async  handleLogin() {
   this.isLoading = true;
   try {
     const result = await login<LoginResponse>({
       email:this.email,
       password:this.password
     })
     console.log('Received login response:', JSON.stringify(result));
     if (result.code === '200') {
       // TokenUtil.setToken(result.data.token)
       PreferencesUtil.put('token', result.data.token)
       router.replaceUrl({
         url:'pages/MainPage'
       })
     }else {
       promptAction.showToast({
         message: result.msg
       })
     }
   }catch (error){
     console.error('登录请求失败:', error);
   } finally {
     this.isLoading = false
   }
 }

完整的代码场景参考

Graduation-HarmonyOS/entry/src/main/ets/request at main · MartinLiuMingZhi/Graduation-HarmonyOS