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 dev
Developing live previewnpm run build
packaging
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]