HarmonyOS NEXT实战：接入和使用axios

Question

##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) {
    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) => {
        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(config: AxiosRequestConfig): Promise {
    console.log('Request config', config);
    return this.instance.request(config);
  }

  get(config: AxiosRequestConfig): Promise {
    return this.request({ ...config, method: 'GET' });
  }

  post(config: AxiosRequestConfig): Promise {
    return this.request({ ...config, method: 'POST' });
  }
}

export const axiosAPI = new BaseRequest ({
  baseURL: '自己接口地址',
  timeout: 60000
})

调用

import { axiosAPI } from '../BaseRequest'

export const getList = (id:string) =>{
  return axiosAPI.get