鸿蒙笔记——axios基础封装+PersistentStorage持久化存储登录信息

// 基于axios做一些基础封装：

import axios, { InternalAxiosRequestConfig, AxiosError, AxiosResponse, AxiosRequestConfig } from '@ohos/axios'
import { promptAction, router } from '@kit.ArkUI'
import { Auth } from './Auth'  //封装的登录信息全局化



// 1. 实例化（baseURL + timeout）
// 配置：接口基地址、超时时间
const httpInstance = axios.create({
  baseURL: 'https://xxx/',
  timeout: 5000
})


// 2. 拦截器：在请求或响应被 then 或 catch 处理前拦截它们。
// 请求:客户端 (请求参数 token)-> 服务端
// 拦截器可以添加多个  前一个拦截器处理之后的结果交给下一个拦截器继续处理 直到没有拦截器---最后一个return出去的config就是最终的请求参数

httpInstance.interceptors.request.use((config: InternalAxiosRequestConfig) => {
  // 全局注入token
  const token = Auth.getUser()?.token
  if (token) {
    config.headers.Authorization = token
  }
  // 注意：return千万不要丢
  return config
}, (error: AxiosError) => {
  return Promise.reject(error)
})


// 2.响应：响应返回数据  
// 服务器 ->[拦截器]  客户端
// 判断响应状态码做逻辑处理 401(token失效)、404
// 依据 http code  2xx(成功走第一个回调)  4xx 5xx（走第二个回调）

// 定义错误接口类型
interface APIErrorType {
  message: string
  msg: string
  code: string
}

httpInstance.interceptors.response.use((response: AxiosResponse) => {

  return response
}, (error: AxiosError<APIErrorType>) => {
  // 对响应错误做点什么
  if (error.response) {
    promptAction.showToast({
      message: error.response.data.message,
      duration: 2000
    })

    // token失效跳转到登录页
    if (error.response.status === 401) {
      Auth.delUser()  // 清除本地用户信息
      router.pushUrl({   // 跳转到登录页
        url: 'pages/LoginPage'
      })
    }
  }
  return Promise.reject(error)
})


// 3. 定义一个接口通用的泛型返回类型
interface HttpRes<T> {
  code: string,
  msg: string,
  result: T
}

// 封装fetchData函数
// 1. 参数  2. 核心逻辑  3.返回值
function fetchData<T>(reqConfig: AxiosRequestConfig): Promise<AxiosResponse<HttpRes<T>, null>> {
  // axios实例发送请求 // 返回promise
  return httpInstance.request<null, AxiosResponse<HttpRes<T>, null>, null>(reqConfig)
}

export { httpInstance, fetchData }

export const USER_KEY = 'userInfo'

// 用户信息类型
export interface UserType {
  token: string
  name: string
  avatar: string
  account: string
。。。。
}

export class Auth {
  // 持久化Token
  static initLocalUser() {
    PersistentStorage.persistProp(USER_KEY, {})
  }

  // 存数据
  static setUser(data: UserType) {
    AppStorage.setOrCreate(USER_KEY, data)
  }

  // 取数据
  static getUser(): UserType {
    return AppStorage.get(USER_KEY) as UserType
  }

  // 删数据
  static delUser() {
    AppStorage.setOrCreate(USER_KEY, {})
  }
}