@dpdfe/axios

Features

• 支持配置策略同一个请求，最多发送一次，如果发送多次，自动取消上次请求
• 支持配置策略同一个请求，最多发送一次，触发多次，不发送本次请求
• 提供取消页面所有请求的方法

安装

• 使用 npm:

npm i --save @dpdfe/axios

• 引入

import axios from '@dpdfe/axios'

使用方法

基于 axios 进行封装，可以像使用 axios 一样使用@dpdfe/axios

• 支持配置策略同一个请求，最多发送一次，如果发送多次，自动取消上次请求

• 配置全局 axios 策略

 const instance = axios.create({
        baseURL: 'http://localhost:3000/',
        timeout: 1000000,
        strategy: AjaxStrategy.CANCEL_LAST_AT_MOST_ONCE, // 多个重复请求发送，自动取消先发送的请求
 });

• 针对单个请求配置 axios 策略

instance.get('/', {strategy: AjaxStrategy.CANCEL_LAST_AT_MOST_ONCE})

• 支持配置策略同一个请求，最多发送一次，触发多次，不发送本次请求

• 配置全局 axios 策略

 const instance = axios.create({
        baseURL: 'http://localhost:3000/',
        timeout: 1000000,
        strategy: AjaxStrategy.CANCEL_CURRENT_AT_MOST_ONCE, // 多个重复请求发送，仅发送第一个请求，后面重复的被拦截不发送
 });

• 针对单个请求配置 axios 策略

instance.get('/', {strategy: AjaxStrategy.CANCEL_CURRENT_AT_MOST_ONCE})

• 路由变化时，可以取消上一个页面的请求，react 中使用方法

 <Route
    path={route.path}
    render={(props) => {
       instance.cancelReqs('get');
       return <route.component {...props} routes={route.routes} />;
    }}
/>

注意事项

由于重复请求或调用 cancelReqs 方法而取消的请求，会抛出异常，可以根据实际场景进行处理，axios.isCancel 方法来判断是由手动取消引发的异常。如：

   instance?.interceptors.response.use(
            function (response) {
                return response;
            },
            function (error) {
                if (axios.isCancel(error)) {
                     // 手动取消引发的异常，进行处理
                    return new AjaxCancelError('手动取消了请求');
                }
                return Promise.reject(error);
            },
        );