我如何多次向api请求

时间:2019-08-30 08:17:25

标签: reactjs axios

我无法多次调用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调用由于同时调用而失败

1 个答案:

答案 0 :(得分:0)

就个人而言,我会尝试一些可以在失败时重试的东西。使用任务/异步很容易做到:

// 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
});