HarmonyOS NEXT实战：接入和使用axios##HarmonyOS Next实战##三方SDK##教育## 参

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

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<T = any, R = AxiosResponse, 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
    }})
}