首页 > 解决方案 > 如何在再次调用 **SET-INTERVAL** 中的函数之前“等待”API 的响应

问题描述

我正在使用async 和 await,以便调用相同的 API,但日期不同。->

假设用户想从 中查看表数据01/02/2020 - 20/02/20,所以我想通过每天一个接一个地访问 API 21 次。所以,我用了setInterval(fun, 1000). 但是 AWAIT 不会在间隔中工作。请参阅下面的代码->

//fromDate = date selected by user. (for ex 01/02/2020)
//momentToDate = the last date set by user. (for ex. 20/02/20)
//endDate = fromDate + 1 (in order to get one day data from API)

         function onClickGetDateByFilter() {
            setComapreTableLoading(true);
            let endDate = moment(fromDate, 'YYYY-MM-DD hh:mm:ss');
            var callInterval = setInterval(async () => {
                endDate = moment(endDate).add(1, 'days');
                if (endDate <= momentToDate) {
                    let date = { fromDate, toDate: endDate }

                    await getDataWithClientId('clientID', date)
                        .then(async (res) => {

                            if (res.results && res.results.length > 0) {
                                setClientData({...clientData}, res.results)
                                setComapreTableLoading(false);
                            }
                        })
                        .catch(err => {
                            setComapreTableLoading(false);
                            console.log(err);
                            alert(err);
                        })
                }
                else {
                    setComapreTableLoading(false);
                    clearInterval(callInterval)
                };
            }, 1000)
       }

我需要调用 setInterval 直到用户选择的最后一个日期。但是使用上述方法,在从服务器获取响应之前,它会继续调用一个新的 API,但是我想在第一个 API 返回响应之后第二次调用 API。

任何建议也将不胜感激。谢谢。

如果您需要有关代码的更多信息,可以询问。

标签: javascriptnode.jsreactjsasync-awaitsetinterval

解决方案


Async 是一个实用模块,它为使用异步 JavaScript 提供了直接、强大的功能。

您需要 Async 包才能使用并行方法。

$ npm 安装异步

import async from 'async';


Async 包不要与异步函数混淆,因为Async包与async-await.

来源:https ://caolan.github.io/async/v3/docs.html


推荐阅读