HarmonyOS NEXT实战：接入和使用axios

HarmonyOS Next实战##三方SDK##教育

参考资料：
https://ohpm.openharmony.cn/#/cn/detail/@ohos%2Faxios

Axios 是什么?
Axios 是一个基于 promise 网络请求库，作用于node.js 和浏览器中。 它是 isomorphic 的(即同一套代码可以运行在浏览器和node.js中)。在服务端它使用原生 node.js http 模块, 而在客户端 (浏览端) 则使用 XMLHttpRequests。

鸿蒙三方库的Axios 介绍：
这是一个基于 promise 的网络请求库，可以运行 node.js 和浏览器中。本库基于Axios 原库v1.3.4版本进行适配，使其可以运行在 OpenHarmony，并沿用其现有用法和特性。

• http 请求
• Promise API
• request 和 response 拦截器
• 转换 request 和 response 的 data 数据
• 自动转换 JSON data 数据

发起一个 GET 请求：
axios支持泛型参数，由于ArkTS不再支持any类型，需指定参数的具体类型。 如：axios.get, D = any>(url)

• T: 是响应数据类型。当发送一个 POST 请求时，客户端可能会收到一个 JSON 对象。T 就是这个 JSON 对象的类型。默认情况下，T 是 any，这意味着可以接收任何类型的数据。
• R: 是响应体的类型。当服务器返回一个响应时，响应体通常是一个 JSON 对象。R 就是这个 JSON 对象的类型。默认情况下，R 是 AxiosResponse，这意味着响应体是一个 AxiosResponse 对象，它的 data 属性是 T 类型的
• D: 是请求参数的类型。当发送一个 GET 请求时，可能会在 URL 中添加一些查询参数。D 就是这些查询参数的类型。参数为空情况下，D 是 null类型。

下载安装

ohpm install @ohos/axios

需要权限

ohos.permission.INTERNET

修改module.json5配置文件，增加网络权限：

    "requestPermissions": [
      {
   
        "name": "ohos.permission.INTERNET"
      }
    ]

创建BaseRequest 工具类

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
})

调用

import {
    axiosAPI } from '../BaseRequest'

export const getList = (id:string) =>{
   
  return axiosAPI.get<object>({
   url:'自己的请求地址',
    params:{
   
      "id":id
    }})
}