Reactjs 如何多次从api请求

我多次调用api时遇到问题

以下是我到目前为止所做的

let array = []; 

this.state.localjson.map((item) => {

  var floor = this.state.floor;
       var  date = this.formatDate(item.date);
       var  time = this.formatTime(item.time);
       var  id = item.id;
        item.date = this.formatDate(item.date);
        item.time = this.formatTime(item.time);

 axios.get(`http://localhost:3300/api/employees/${id}/${date}/${time}/${floor}`)
            .then(response => {
                if (response.data === false) {
                    array.push(item);
                    this.setState({
                        result: array
                    });

                }


            })

        });

---

但这个解决方案的问题是，有时api调用由于同时调用而失败，我个人认为，如果失败，我会重试。使用tasks/async很容易：

// Delay helper
const delay = (ms) => new Promise((resolve) => setTimeout(resolve, ms));

this.state.localjson.forEach(async (item) => {
    let floor = this.state.floor;
    let  date = this.formatDate(item.date);
    let  time = this.formatTime(item.time);
    let  id   = item.id;
    item.date = this.formatDate(item.date);
    item.time = this.formatTime(item.time);

    let tries = 5;
    while (--tries >= 0) {
        try {
            var response = await axios.get(`http://localhost:3300/api/employees/${id}/${date}/${time}/${floor}`);
            if (response.data === false) {
                this.setState({
                    result: this.state.result.concat(item)
                });
            }
            // Break out of the loop and return
            break;
        } catch (err) {
            // Await a delay (You can also use a backoff, like tries*1000 or an exponential backoff)
            // https://en.wikipedia.org/wiki/Exponential_backoff
            await delay(1000);
        }
    }
});

如果我们只希望在所有结果完成后进行一次渲染，则可以使用以下方法：

// Delay helper
const delay = (ms) => new Promise((resolve) => setTimeout(resolve, ms));

let finalResults = [];

await this.state.localjson.map((item) => new Promise(async (resolve, reject) => {
    let floor = this.state.floor;
    let  date = this.formatDate(item.date);
    let  time = this.formatTime(item.time);
    let  id   = item.id;
    item.date = this.formatDate(item.date);
    item.time = this.formatTime(item.time);
    let tries = 5;
    while (--tries >= 0) {
        try {
            var response = await axios.get(`http://localhost:3300/api/employees/${id}/${date}/${time}/${floor}`);
            if (response.data === false) {
                finalResults.push(item);
            }
            //Resovle the promise, we're done here
            resolve();
            // Break out of the loop and return
            break;
        } catch (err) {
            // Await a delay (You can also use a backoff, like tries*1000 or an exponential backoff)
            // https://en.wikipedia.org/wiki/Exponential_backoff
            await delay(1000);
        }
    }

    // If we've reached this point, we've exhausted all of our errors
    reject();
}));


this.setState({
    results: finalResults
});

---

你到底想要实现什么？在.map函数中调用API，然后甚至在已解析的承诺上设置状态都是一个坏主意。@zhuber我只需要调用this.state.localjson中的每个项，然后检查它是否有返回。。对不起，我在网络开发方面还是新手。您知道其他解决方案吗？您是否需要在下载完所有请求后或每次成功请求后重新启动？嗯，因为响应是异步的，这就是为什么我的set.state在响应中的原因。但如果你有解决办法的话。请随意分享：）这会不会导致不必要的重新渲染和重新映射，因为它对每个项目都调用setState（）？我的意思是，如果他想在结果到来时更新：（这可能是一个很长的调用）。如果这些是快速呼叫：我可以提供一个替代解决方案。似乎它没有发送工作给我，而且第二个解决方案有错误？在await this.state.localjson.map（（项）上，当您使用await语法时，函数必须标记为async。我鼓励您在javascript@user3121362中查看async/await