时间戳

首页 > 解决方案 > 如果在给定的时间范围内多次调用相同的方法，则取消旧的 Promise.resolve

javascript - 如果在给定的时间范围内多次调用相同的方法，则取消旧的 Promise.resolve

问题描述

我正在使用 Promise 和 axios 来响应调用 POST api 并获取记录列表。问题是当触发多个 API 调用时，最后得到响应的任何一个都在更新状态。我只想使用最后调用的 API 响应。Exp：使用不同的 postbody 调用 API 3 次，如果第一次调用响应花费的时间比第二次和第三次调用的时间长，那么回调是使用第一次调用 setstate 的响应，而不是我想忘记第一次调用和第二次调用，只考虑最后一次调用响应。

以下是示例通用文件

const apiService = axios.create({
    baseURL: 'https://example.com/api/,
});

    function post(postData) {
        return Promise.resolve(apiService.post('https://example.com/api/getuserlist', postData, {
            headers: {'Authorization': `Bearer sdfsdfsdf-cvdfs`}
        }));
    }

服务文件

static getUsers(postData) {
   return post(postData);
}

反应组件

 function getUsersList = (Filters )=>{
       getUsers({ "Filters": Filters }).then((response) => {
           this.setState({ users: response.data})
       })
    }

问题是当 getUsersList 被多次调用时，无论最后一个响应被设置为用户状态，最后一次调用应该是用户列表。

标签： javascriptreactjspromiseaxios

解决方案

使用CPromise包装器，代码可能如下所示查看现场演示：

const CPromise = require('c-promise2');
const axios= require('axios');

// Let's wrap axios get method to the CPromise
function get(url){
    return new CPromise((resolve, reject, {onCancel})=>{
        axios.get(url, {
            cancelToken: new axios.CancelToken(function executor(cancel) {
                onCancel(cancel)
            })
        }).then(resolve, reject);
    });
}

let chain= null;

function makeRequest(url){
    chain && chain.cancel();
    chain= get(url).then((response)=> {
            console.log(`Response ${JSON.stringify(response.data)}`);
        }, function (err) {
            console.warn(`Error: ${err}`);
        }
    );
}

// some endpoint with a delay of 3 seconds for a response
const url= "https://run.mocky.io/v3/753aa609-65ae-4109-8f83-9cfe365290f0?mocky-delay=3s";

makeRequest(url);
// make the same request again, abort the previous
setTimeout(()=> makeRequest(url), 1000);

但由于该包处于早期 beta 阶段，您可以使用 axios 提供的普通取消令牌参见 Axios 文档

推荐阅读