Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/pandaoh/js-xhttp
An HTTP tool is based on Axios that can make ajax more convenient and universal, easier to manage, and more efficient and unified. XHttp 是一个基于 axios 二次封装的 HTTP 请求工具，可以让你在项目中使用 http 请求时更加简单，更加通用灵活，更加高效统一，且易于全局管理。
https://github.com/pandaoh/js-xhttp
ajax axios http javascript js-http js-xhttp request rollup typescript x-xrequest xhttp xrequest
Last synced: 16 days ago
JSON representation
An HTTP tool is based on Axios that can make ajax more convenient and universal, easier to manage, and more efficient and unified. XHttp 是一个基于 axios 二次封装的 HTTP 请求工具，可以让你在项目中使用 http 请求时更加简单，更加通用灵活，更加高效统一，且易于全局管理。
- Host: GitHub
- URL: https://github.com/pandaoh/js-xhttp
- Owner: pandaoh
- License: mit
- Created: 2022-01-17T07:19:09.000Z (almost 3 years ago)
- Default Branch: main
- Last Pushed: 2024-01-24T02:15:50.000Z (11 months ago)
- Last Synced: 2024-04-24T08:07:40.432Z (8 months ago)
- Topics: ajax, axios, http, javascript, js-http, js-xhttp, request, rollup, typescript, x-xrequest, xhttp, xrequest
- Language: JavaScript
- Homepage: https://www.npmjs.com/package/js-xhttp
- Size: 1.37 MB
- Stars: 4
- Watchers: 3
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.en.md
- License: LICENSE
Awesome Lists containing this project
README
[中文 README](https://github.com/pandaoh/js-xhttp)
# 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](https://www.npmjs.com/package/js-xxx))
## Install
```shell
npm install js-xhttp -S
```
## Import/Require
```javascript
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
```javascript
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
```javascript
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
```javascript
$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
```javascript
XHttpUtils.typeof({}); // 'object'
/* ...and so more... */
```
### XHttpMethod
```javascript
console.log(XHttpMethod);
// {
// GET: 'GET',
// POST: 'POST',
// PUT: 'PUT',
// DELETE: 'DELETE',
// PATCH: 'PATCH',
// OPTIONS: 'OPTIONS'
// }
```
### Axios
```javascript
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... */
```
* [Axios Docs](https://www.axios-http.cn/docs/intro)
* [Axios Github](https://github.com/axios/axios)
## API List
[API Docs](https://github.com/pandaoh/js-xhttp/blob/master/docs/README.md)
## Others
* XHttp is based on [axios](https://github.com/axios/axios) secondary encapsulation implementation.
* For problem feedback, you can create [Issue](https://github.com/pandaoh/js-xhttp/issues) or submit [Pull Request](https://github.com/pandaoh/js-xhttp/pulls), email: [[email protected]](mailto:[email protected]).
* [Blog](http://a.biugle.cn)
* Leo He
* More functions are being improved...