React-如何在不使用setTimeout的情况下将前端与后端请求同步?

时间:2019-05-28 01:22:27

标签: javascript reactjs asynchronous

当我尝试在React JS中进行验证时,通常我需要创建一个set timeout函数来将fetch api调用与前端同步,因为fetch api调用会花费一些时间。还有其他方法吗?是在最佳做法下而不是重复的代码?

我一直在使用4000-5000的设置超时,它可以工作,但是我觉得这不是最好的方法。

编辑- 下面是我使用超时之前所做的代码段,但是由于某些原因,当函数运行时,“ existingTrains”从状态中消失了。

async getExistingReservations(date, trackNo, direction, noTickets) {

        let self = this;
        var trains;
        var ticketRange = 100 - noTickets;

        var data = {
            "date": date,
            "trackNo": trackNo,
            "direction": direction
        }

        console.log(data);

        //get Existing Reservation Details
        await fetch('http://localhost:5000/resRecords/getSeats', {
            method: 'POST',
            body: JSON.stringify(data),
            headers: {'Content-Type': 'application/json'}
        })
            .then(response => {
                return response.json()
            })
            .then(json => {
                console.log(json)
                trains = json.find(function (tickets) {
                    return tickets.noTickets < ticketRange

                })
                self.setState({
                        existingTrains: trains
                    }
                )
            });

    }

1 个答案:

答案 0 :(得分:0)

解决此问题的最佳方法是使用async -> await

const getNetworkRequest = async (): string => {
  const r = await makeNetworkRequest();
  console.log(r);

  if(r.data){ return 'got it!' } 
  return 'no data :(';
}