axios封装

---

一、简介

Axios ，是一个基于 promise 的网络请求库，可以运行 node.js 和浏览器中。

二、封装步骤

1. 下载

在终端输入以下代码：

ohpm install @ohos/axios

2. 二次封装

步骤：

1. 创建一个axios实例
2. 配置全局通用的基地址、超时时间等
3. 配置请求拦截器、响应拦截器
4. 封装具体的请求方法

代码如下（示例）：

import axios, { InternalAxiosRequestConfig, AxiosError, AxiosResponse, AxiosRequestConfig } from '@ohos/axios'
import { auth } from './auth'
import { promptAction, router } from '@kit.ArkUI'

export const baseURL: string  = 'https://meikou-api.itheima.net'


// 实例化 通用配置
const instance = axios.create({
  baseURL,
  timeout: 5000
})

// 拦截器配置
// 请求拦截器
// token配置等
instance.interceptors.request.use((config: InternalAxiosRequestConfig) => {
  const user = auth.getUser()
  if (user.token) {
    config.headers['Authorization'] = `Bearer ${user.token}`
  }
  return config
}, (error: AxiosError) => {
  return Promise.reject(error)
})

// 抽取公共部分
export interface HttpResponse<T> {
  code: string
  msg: string
  result: T
}
// 简化后续编码
export type ResponseType<T> = AxiosResponse<HttpResponse<T>>

// 做法 1增加类型
export interface APIErrorType {
  message: string
  msg: string
  code: string
}

// 添加响应拦截器
// 错误统一处理等
instance.interceptors.response.use((response: AxiosResponse) => {
  return response
}, (error: AxiosError<APIErrorType>) => {
  //401 --token失效 ---清楚用户信息 去登录页
  if (error.response?.status === 401) {
    //todo
    promptAction.showToast({message: '登录失效'})
    auth.removeUser()
    router.pushUrl({url: 'pages/LoginPage'})
  }else {
    promptAction.showToast({message: error.response?.data.message})
  }
  return Promise.reject(error)
})


export class RequestAxios {
  // get -> params -> { params: {} }
  static get<T>(url: string, params?: AxiosRequestConfig): Promise<ResponseType<T>> {
    return instance.get<null, ResponseType<T>>(url, params)
  }

  static post<T,D>(url: string, data?: D): Promise<ResponseType<T>> {
    return instance.post<null, ResponseType<T>,D>(url, data)
  }

  static delete<T>(url: string, data?: AxiosRequestConfig): Promise<ResponseType<T>> {
    return instance.delete<null, ResponseType<T>>(url, data)
  }

  static put<T>(url: string, data?: object): Promise<ResponseType<T>> {
    return instance.put<null, ResponseType<T>>(url, data)
  }
}

三、使用方法

封装好axios请求工具，就可以实现哪需要哪调用。一般呢我们会把具体的请求方法封装成api，以便代码复用。
具体实例如下：

import { RequestAxios } from '@mk/basic'
// 数据类型已经提供好了
import { Banner } from '../viewmodel/index'

export const getBannerApi = () => {
  return RequestAxios.get<Banner[]>('/home/banner')  //get<返回的响应数据result类型>
}

页面中使用：

  // 获取接口数据
  async getData() {
    // banner数据
    const res = await getBannerApi()
    this.banners = res.data.result
  }

---