526互联

axios封装

发布时间 2023-04-22 15:45:50作者: Gentry-Yang

目录

   http 
    ---request
      ---type.ts
      ---index.ts
    config.ts
    index.ts

request

type.ts

import type { AxiosRequestConfig, AxiosResponse, InternalAxiosRequestConfig } from "axios"

export interface YRequestInterceptors<T = any> {
  requestInterceptor?: (config: InternalAxiosRequestConfig<T>) => InternalAxiosRequestConfig<T>
  requestInterceptorCatch?: (error: any) => any
  responseInterceptor?: (config: AxiosResponse<T>) => AxiosResponse<T>
  responseInterceptorCatch?: (error: any) => any
}
export interface YRequestConfig<T = any> extends AxiosRequestConfig {
  showLoading?: boolean
  interceptors?: YRequestInterceptors<T>
}

index.ts

import axios from "axios"
import NProgress from "nprogress"
import "nprogress/nprogress.css"

import type { AxiosInstance } from "axios"
import type { YRequestInterceptors, YRequestConfig } from "./type"

const DEAFULT_LOADING = true

class AxiosRequest {
  private showLoading: boolean
  private instance: AxiosInstance
  interceptors?: YRequestInterceptors

  constructor(config: YRequestConfig) {
    this.instance = axios.create(config)
    this.showLoading = config.showLoading ?? DEAFULT_LOADING
    this.interceptors = config.interceptors
    this.instance.interceptors.request.use(
      this.interceptors?.requestInterceptor,
      this.interceptors?.requestInterceptorCatch
    )
    this.instance.interceptors.response.use(
      this.interceptors?.responseInterceptor,
      this.interceptors?.responseInterceptorCatch
    )
    this.instance.interceptors.request.use(
      (config) => {
        if (this.showLoading) NProgress.start()
        return config
      },
      (error) => {
        return Promise.reject(error)
      }
    )
    this.instance.interceptors.response.use(
      (response) => {
        NProgress.done()
        // 关闭加载动画
        return response
      },
      (err) => {
        NProgress.done()
        // 关闭加载动画
        return Promise.reject(err)
      }
    )
  }
  request<T = any>(config: YRequestConfig<T>): Promise<T> {
    return new Promise((resolve, reject) => {
      this.instance
        .request<T>(config)
        .then((res) => {
          // 必须 resolve(res.data) 不能resolve(res)
          resolve(res.data)
          return res
        })
        .catch((err) => {
          reject(err)
        })
    })
  }
  get<T = any>(config: YRequestConfig<T>): Promise<T> {
    return this.request<T>({ ...config, method: "GET" })
  }
  post<T = any>(config: YRequestConfig<T>): Promise<T> {
    return this.request<T>({ ...config, method: "POST" })
  }

  delete<T = any>(config: YRequestConfig<T>): Promise<T> {
    return this.request<T>({ ...config, method: "DELETE" })
  }

  patch<T = any>(config: YRequestConfig<T>): Promise<T> {
    return this.request<T>({ ...config, method: "PATCH" })
  }

  put<T = any>(config: YRequestConfig<T>): Promise<T> {
    return this.request<T>({ ...config, method: "PUT" })
  }
}

export default AxiosRequest

config.ts

const BASE_URL = "/api"
const TIME_OUT = 2500

export { BASE_URL, TIME_OUT }

index.ts

import AxiosRequest from "./request"
import { BASE_URL, TIME_OUT } from "./config"

const request = new AxiosRequest({
  baseURL: BASE_URL,
  timeout: TIME_OUT,
  showLoading: true,
  interceptors: {
    requestInterceptor: (config) => {
      // if (token && config.headers) {
      //   config.headers["Authorization"] = token.value
      // }
      return config
    },
    requestInterceptorCatch: (err) => {
      return err
    },
    responseInterceptor: (res) => {
      return res
    },
    responseInterceptorCatch: (err) => {
      return err
    }
  }
})

export default request

使用

from http import request

type userResult {
	code:number
	data:any
}

function getUserList():
	return reuqet.get<userResult>()