赞
踩
- // 基于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, {})
- }
- }
Copyright © 2003-2013 www.wpsshop.cn 版权所有,并保留所有权利。