coderwhy ts封装axios库

新建service文件夹

request文件夹

service/request/config.ts

let BASE_URL = ''

const TIME_OUT = 10000

if (process.env.NODE_ENV === 'development') {

  BASE_URL = '开发环境ip'

} else if (process.env.NODE_ENV === 'production') {

  BASE_URL = '生产环境ip'

} else {

  BASE_URL = '测试环境ip'

}

export { BASE_URL, TIME_OUT }

service/request/index.ts

import axios from 'axios'
import type { AxiosInstance } from 'axios'
import type { HYRequestInterceptors, HYRequestConfig } from './type'

class HYRequest {

  instance: AxiosInstance

  interceptors?: HYRequestInterceptors

  constructor(config: HYRequestConfig) {

    //创建axios实例

    this.instance = axios.create(config)


    //保存基本信息

    this.interceptors = config.interceptors


    //使用拦截器

    //从config钟取出的拦截器是对应的实例的拦截器

    this.instance.interceptors.request.use(

      this.interceptors?.requestInterceptor,

      this.interceptors?.requestInterceptorCatch

    )

    this.instance.interceptors.response.use(

      this.interceptors?.responseInterceptor,

      this.interceptors?.requestInterceptorCatch

    )


    //所有的实例都有的拦截器

    this.instance.interceptors.request.use(

      (config) => {

        console.log('所有的实例都有的拦截器: 请求拦截成功')
        return config

      },

      (err) => {

        console.log('所有的实例都有的拦截器: 请求拦截失败')

        return err

      }

    )


    this.instance.interceptors.response.use(

      (res) => {

        console.log('所有的实例都有的拦截器: 响应拦截成功')
        
        return res.data

      },

      (err) => {

        console.log('所有的实例都有的拦截器: 响应拦截失败')

        //例子:判断不同httpErrorCode显示不同错误信息

        if (err.response.status === 404) {

          console.log('404错误~')

        }

        return err

      }

    )

  }



  request<T>(config: HYRequestConfig<T>): Promise<T> {

    return new Promise((resolve, reject) => {

      //单个请求对请求config的处理

      if (config.interceptors?.requestInterceptor) {

        config = config.interceptors.requestInterceptor(config)

      }


      this.instance

        .request<any, T>(config)

        .then((res) => {

          //单个请求对数据的处理

          if (config.interceptors?.responseInterceptor) {

            res = config.interceptors.responseInterceptor(res)

          }

          console.log(res)



          //将结果返回出去

          resolve(res)

        })

        .catch((err) => {

          reject(err)

          return err

        })

    })

  }


  get<T>(config: HYRequestConfig<T>): Promise<T> {

    return this.request<T>({ ...config, method: 'GET' })

  }


  post<T>(config: HYRequestConfig<T>): Promise<T> {

    return this.request<T>({ ...config, method: 'POST' })

  }


  delete<T>(config: HYRequestConfig<T>): Promise<T> {

    return this.request<T>({ ...config, method: 'DELETE' })

  }


  patch<T>(config: HYRequestConfig<T>): Promise<T> {

    return this.request<T>({ ...config, method: 'PATCH' })

  }

}


export default HYRequest

service/request/type.ts

import type { AxiosRequestConfig, AxiosResponse } from 'axios'

export interface HYRequestInterceptors<T = AxiosResponse> {

  requestInterceptor?: (config: AxiosRequestConfig) => AxiosRequestConfig

  requestInterceptorCatch?: (error: any) => any

  responseInterceptor?: (res: T) => T

  responseInterceptorCatch?: (error: any) => any

}


export interface HYRequestConfig<T = AxiosResponse> extends AxiosRequestConfig {

  interceptors?: HYRequestInterceptors<T>

}

index.ts文件

import HYRequest from './request'

import { BASE_URL, TIME_OUT } from './request/config'

const hyRequest = new HYRequest({

  baseURL: BASE_URL,

  timeout: TIME_OUT,

  interceptors: {

    requestInterceptor: (config) => {

      const token = ''

      if (token) {

        config.headers!.Authorization = token

      }

      console.log('请求成功拦截')


      return config

    },

    requestInterceptorCatch: (err) => {

      console.log('请求失败拦截')


      return err

    },

    responseInterceptor: (config) => {

      console.log('响应成功拦截')


      return config

    },

    responseInterceptorCatch: (err) => {

      console.log('响应失败拦截')

      return err

    }

  }

})


export default hyRequest

使用

interface DataType {

  data: any

  returnCode: string

  success: boolean

}

hyRequest

  .get<DataType>({

    url: '/home/multidata',

    showLoading: true

  })

  .then((res) => {

    console.log(res.data)

    console.log(res.returnCode)

    console.log(res.success)

  })