vite-request

The request library based on AXIOS secondary encapsulation is convenient for rapid application and centralized processing in business.

The axios-based secondary encapsulation functions are as follows

  • Whether to refresh the login state with login state and login state failure
  • If the request fails, try to initiate it repeatedly, three times by default
  • Whether loading is required
  • Whether uniform error handling is required
  • Interception handling of repeated requests
  • Handling of cache
  • Cancellation processing of the request
  • Multiple domain names are supported
  • Treatment of disconnection
  • Buried statistics of error messages
export interface CustomConfigType {
  // Whether token is required the default value is falseisNeedToken? : boolean;// The token handler defaults to undefinedsetToken? :(config: AxiosRequestConfig) = > void;
  // Refresh the token function default value undefinedrefreshToken? :() = > Promise<any>;
  // No permission status code default value 401
  notPermissionCode: number;

  // Whether to load the default value is falseisNeedLoading? : boolean;// the default loading delay is 300ms
  delayLoading: number;
  // Customize loadingshowLoadingFn? :(isShow: boolean) = > void;

  // Whether the error default value true is requiredisNeedError? : boolean;// Error display mode default value undefinedshowErrorFn? :(error: AxiosError) = > void;
  // Whether to request again (if the request fails) Default value trueisNeedReRequest? : boolean;// The default value is 3connectCount? : number;// Whether error messages need to be recorded The default value is trueisNeedRecordErrorInfo? : boolean;The default value is falseisNeedCache? : boolean; }Copy the code

write

Write in TypeScript

packaging

Package based on rollupJS

  • npm run devDeveloping live preview
  • npm run buildpackaging

Using the instance

Example & node serve.js CD example & node serve.js

Install

  yarn add vite-request -S

  # or

  npm install vite-request -S
Copy the code

Usage

The introduction of

import ViteRequest from 'vite-request'
Copy the code

Initialize instance

Different services can be implemented by multiple instances

  • constructor(config? : AxiosRequestConfig, customConfig? : CustomConfigType);
import ViteRequest from 'vite-request'

1 / / service
const viteRequest1 = new ViteRequest({
  baseURL: 'http://127.0.0.1:5000'
})

2 / / service
const viteRequest2 = new ViteRequest({
  baseURL: 'http://127.0.0.1:3000'
}, {
  isNeedLoading: true
})
Copy the code

Request method

  • get<T>(config? : AxiosRequestConfig, customConfig? : CustomConfigType): Promise<AxiosResponse<T, any>>;
  • post<T>(config? : AxiosRequestConfig, customConfig? : CustomConfigType): Promise<AxiosResponse<T, any>>;
  • delete<T>(config? : AxiosRequestConfig, customConfig? : CustomConfigType): Promise<AxiosResponse<T, any>>;
  • put<T>(config? : AxiosRequestConfig, customConfig? : CustomConfigType): Promise<AxiosResponse<T, any>>;

The custom configuration parameter (customConfig) in the method on the instance overrides the custom configuration parameter (customConfig) on the instance

GET
viteRequest.get<{
  data: { value: string },
  msg: string
}>({
  url: '/news-list'.params: {
    a: 1}}, {isNeedToken: true
}).then(res= > console.log(res.data.data.value), error= > console.log(error, 'error'))
Copy the code
POST
; (async() = > {const { data: { data: { value }}} = await viteRequest.get<{
    data: { value: string },
    msg: string
  }>({
    url: '/news-list'.data: {
      a: 1}}, {isNeedToken: true
  })
  console.log(value)
})()
Copy the code
PUT
viteRequest.put<{
  data: { value: string },
  msg: string
}>({
  url: '/news-list'.data: {
    a: 1}}, {isNeedToken: true
}).then(res= > console.log(res.data.data.value), error= > console.log(error, 'error'))
Copy the code
DELETE
viteRequest.delete<{
  data: { value: string },
  msg: string
}>({
  url: '/news-list'.params: {
    a: 1}}, {isNeedToken: true
}).then(res= > console.log(res.data.data.value), error= > console.log(error, 'error'))
Copy the code

The refresh token

viteRequest.customConfigDefault.refreshToken = async() = > {const res = await viteRequest.get({
    url: '/refresh-token'
  }, {
    isNeedLoading: true
  })
  const { token } = res.data.data
  console.log(token)
  window.token = token
}
Copy the code

Custom token processing

const viteRequest = new ViteRequest({
  baseURL: 'http://127.0.0.1:5000'
}, {
  setToken(config) {
    config.headers.token = 'custom token'}})Copy the code

Custom unified error handlers

const viteRequest = new ViteRequest({
  baseURL: 'http://127.0.0.1:5000'
}, {
  showErrorFn(error) {
    console.log(error, 'Custom unified Error handlers')}})Copy the code

Custom unified loading handler function

const viteRequest = new ViteRequest(
  {
    baseURL: "http://127.0.0.1:5000"}, {isNeedLoading: true.showLoadingFn(isShow) {
      isShow ? console.log("start") : console.log("close"); }});Copy the code

The source address

github npm

Post to recommend

  • Vue + TypeScript + Element-UI + Axios builds the front-end project infrastructure
  • Realize project download, automatic routing and project release scaffolding based on Node
  • Encapsulate a simple WebSocket library
  • Note: Vue often meet questions summary and analysis
  • Proxy is an alternative to Object. DefineProperty in Vue3.0
  • Vue 3.0 – First experience 1
  • Figure out a prototype, a prototype object, a prototype chain
  • Promise Principles = Build a Promise from 0 to 1

[Notes are not easy, if it is helpful to you, please like, thank you]