Skip to content

Latest commit

 

History

History
218 lines (186 loc) · 7.08 KB

README.en.md

File metadata and controls

218 lines (186 loc) · 7.08 KB
Raw

中文 README

XHttp

介绍

An HTTP tool is based on Axios that can make ajax more convenient and universal, easier to manage, and more efficient and unified.

Features

  • Compatible with axios.
  • Basic request encapsulation.
  • Request, response, error interception and handling.
  • Request header interception processing.
  • Log output, callback (whether successful or not) Hooks when the request is completed.
  • Actively cancel requests, cancel duplicate requests, and add request whitelist.
  • Request result processing, permission control, and so on.
  • Request to retry axios-retry.
  • Default error handling, which can also be customized.
  • Provide a method for modifying the default configuration of an instance.
  • Provide common request-related method tool class XHttpUtils. (Singleton Class-no initialization required-1.4.0 and above cancel-transfer to js-xxx JavaScript Function Library)

Install

npm install js-xhttp -S

Import/Require

const { XHttp, XHttpMethod, XHttpUtils, Axios, CODE_MSG } = require('js-xhttp');
import { XHttp, XHttpMethod, XHttpUtils, Axios, CODE_MSG } from 'js-xhttp';
import XHttp from 'js-xhttp';

Use

Initialize an instance

import XHttp from "js-xhttp";
import { message, notification } from "@/plugins/antd";

// globally initialize an instance. All configurations are as follows, all optional parameters. You can also XHttp.create(); initialize directly.
const $http = XHttp.create(
  {
    timeout: 10000, // timeout default: 30000
    cancelDuplicatedRequest: true, // Whether to cancel the duplicate request default: true
    rejectErrorPromise: false, // [default: true] Use with errorHandler to reject the requestError
    retryConfig: {
      // Retry the configuration
      retry: 3, // retry count
      delay: 1000, // Base delay time for each retry
    },
    // Use formatResultAdaptor handle response data or use request config.formatResultAdaptor handle response data
    requestHandler: (config: any) => {
      console.log("requestHandler", config); // Intercept processing before request
      console.log(config?.cancelRequest); // Cancel request
    },
    responseHandler: (response: any) => {
      // Response handler before response
      if (response.data.code != 0) {
        message.error(response.data.msg);
      }
      console.log(response.config);
    },
    errorHandler: (error: any, requestConfig: any) => {
       console.log(requestConfig);
      // Error handler before error
      if (!XHttp.isCancel(error) && !error.message?.includes("custom-error")) {
        notification.error({
          message: `${error.status}-${error.statusText}`,
          description: `发生错误了 ${error.data?.msg ?? error?.data?.message ?? "未知错误"}`,
        });
      }
      // Whether to pass the error to the outer layer. If not, you can avoid customizing the error handling for each request.
      // return Promise.reject(error); 
      console.log("errorHandler", error); // Error log
      if (requestConfig.rejectErrorPromise) {
        return Promise.reject(error);
      }
    },
    setRequestHeaders: (config: any) => {
      // Set request headers here, you can also use $http.setAuthToken to set the authorization token.
      return config; // Returns the configuration object, and the request header can be modified. must return an Headers object, otherwise an error will be thrown.
    },
    requestFinally: (requestConfig: any) => {
      console.log("requestFinally Hooks", requestConfig); // The callback when the request is completed, regardless of the result.
    },
  },
  // axios configuration
  {
    baseURL: import.meta.env.VITE_REQUEST_BASE_URL, // Set the base url by environment variables
    validateStatus: (status: number) => {
      // XHttp default status validation rule is all return true.
      // You can customize the status validation rule here.
      // Return true means success(resolve), otherwise failure(reject). You can customize the status validation rule here.
      return status >= 200 && status < 300;
    },
  }
);

export default $http;
// You can also use the following methods: get post put patch delete request. You can also use the axios object, tools class, etc.

Basic request

XHttp.get('/tests', { start: 0, count: 20 }, {});
XHttp
  .post(
  '/login',
  { username: 'test', password: '123456' },
  { headers: { 'Content-Type': 'application/json' }}
  ).then((res) => {
    console.log('res', res);
  })
  .catch((err) => {
    console.log('err', err);
  })
  .finally(() => {
    console.log('finally TEST');
  });
XHttp.get('/test', { start: 0, count: 20 }, {}, true); 
// The whitelist cannot be cancelled unless cancelWhiteListRequest() is called
XHttp.request(XHttpMethod.GET, '/tests', { params: { start: 0, count: 20 }, rejectErrorPromise: true }, {}, true);

$http.get('/tests', { start: 0, count: 20 }, {});
$http
  .post(
  '/login',
  { username: 'test', password: '123456' },
  { headers: { 'Content-Type': 'application/json' }, rejectErrorPromise: true }
  ).then((res) => {
    console.log('res', res);
  })
  .catch((err) => {
    console.log('err', err);
  })
  .finally(() => {
    console.log('finally TEST');
  });
$http.get('/test', { start: 0, count: 20 }, {}, true); 
// The whitelist cannot be cancelled unless cancelWhiteListRequest() is called
$http.request(XHttpMethod.GET, '/tests', { params: { start: 0, count: 20 } }, {}, true);

XHttp methods

$http.setAuthToken('test token');
$http.setBaseURL('http://localhost:666');
console.log($http.getInstance().defaults.headers);
$http.cancelRequest('all');
$http.cancelWhiteListRequest('all white list');

XHttp.setAuthToken('test token');
XHttp.setBaseURL('http://localhost:666');
console.log(XHttp.getInstance().defaults.headers);
XHttp.cancelRequest('all');
XHttp.cancelWhiteListRequest('all white list');
/* ...and so more... */

XHttpUtils methods

XHttpUtils.typeof({}); // 'object'
/* ...and so more... */

XHttpMethod

console.log(XHttpMethod);
// {
//   GET: 'GET',
//   POST: 'POST',
//   PUT: 'PUT',
//   DELETE: 'DELETE',
//   PATCH: 'PATCH',
//   OPTIONS: 'OPTIONS'
// }

Axios

Axios.get('/axios')
  .then(function (response) {
    console.log(response.data);
    console.log(response.status);
    console.log(response.statusText);
    console.log(response.headers);
    console.log(response.config);
  })
  .catch((e) => {});
/* ...and so more... */

API List

API Docs

Others