如何在每个请求等待几秒钟的情况下同步处理 api 请求答案

【问题标题】：How to handle api requests synchronously with waiting for few seconds for each request如何在每个请求等待几秒钟的情况下同步处理 api 请求
【发布时间】：2018-09-10 17:26:17
【问题描述】：

我是 Web 开发的初学者，目前正在学习 React、Redux 和 Node。我正在尝试开发一个智能停车模拟应用程序。我已经开发了一个 Node rest api。我有另一个使用 React 和 Redux 构建的单页应用程序。

我假设一个城市有 7 个停车位（每个停车位都有特定的纬度和经度）。每 5 秒，我假设有一辆车在随机的地方停车。汽车一出现，我的应用程序就会调用 node-api getOptimalParking 并使用特定算法确定应该停放的停车位。

现在假设汽车 1 被分配了一个停车位 1，它们之间的距离是 7 公里。我假设行驶 1 公里需要 1 秒，因此汽车 1 需要 7 秒才能到达停车位 1。 7 秒后，我的反应应用程序将调用 api substractOneParkingSlot。

我想达到什么目标？

我无法弄清楚的事情是每 5 秒就有一辆车 Ci 不断出现，我必须等待每辆车的 Si 秒。只要Si 达到零，我就会调用一个 api。如何处理这件事，即如何在调用 api 之前等待 Si 秒，同时另一辆车 Cj 可以来来往往，我必须独立等待 Sj 秒。

节点 API 列表

getOptimalParking(userLat, userLng){
    return {
        distance: distance,
        lat: parkingLat,
        lng: parkingLng
    }
}

substractOneParkingSlot(parkingLat, parkingLng){
    if(parkingSlotAvailable) {
        currentParkingSlot -= 1
        return sucess
    }
    else 
        return failure
}

React-redux 应用程序工作

汽车一出现，我就会调用一个 redux 操作，该操作向 getOptimalParking api 发出请求，然后我有另一个 redux 操作，它在 Ci 秒后调用 substractOneParkingSlot api。

由于我有多个这样的并发调用 redux 操作，如何实现这一点？

谢谢

编辑：- 对于未来的读者，here 提供了非常详细的答案。

【问题讨论】：

标签： node.js reactjs api redux

【解决方案1】：

承诺救援，假设您已经意识到它们。让你的行动是这样的：

const onParkedIntoSpace = id => dispatch => <call api and update some redux state>

const onGetParkingSpace = data => dispatch => {
    fetch('/parking', data)
        .then(position => {
            dispatch(<an action that will drive car to position>)

            return new Promise(resolve => {
                setTimeout(() => {
                    resolve(true)
                }, position.distance * 1000)
            })
        })
        .then((success) => {
            dispatch(onParkedIntoSpace())
        })
}

由于 Promise 可以从一个到另一个，我们也可以完全更改或发送一个新的 Promise。在节点返回位置后，将创建并返回一个新的承诺，它将在距离秒内解决承诺。在第二次解决后，我们将其称为dispatch(onParkedInoSpace())。

上面的代码也可以扩展为让new Promise拒绝并被捕获并通知Node它丢失了！

其他变化的更新：两辆车争夺同一个空间。

到第 1 辆车的 setTimeout 执行时，第 2 辆车会占用它，因为它更接近。要解决此问题，您需要将 currentParkingSlot 从数值更改为对象数组，如下所示：{ id: number, reserved ：布尔值；占用：布尔值}[]。当您分配停车位时，将传递 id 并将 reserved 设置为 true。当 UI 在停放时调用 API 时，occupied 设置为 true。在新的停车请求中，您过滤数组以查找可用的地段，如下所示：

const parkingLots = [{
    id: 1,
    reserved: false,
    occipied: true,
    lat: 1.1,
    log: 1.1
}]

const getAnEmptyParkingLot = (parkingLots) => parkingLots.findIndex(lot => !lot.reserved || !lot.occipied)

const onRequestParkingLot = (request, response) => {
    const newLotIndex = getAnEmptyParkingLot(parkingLots)

    if (newLot > -1) {
        parkingLots[newLotIndex].reserved = true;
        response.
            .status(200)
            .json(newLot) // include distance
    } else {
        response.
            .status(200)
            .json({
                message: 'Sorry no space available'
            })
    }
}

const onParkedOntoLot = (request, response) => {
    const parkedToLot = parkingLots.findIndex(lot => lot.id === request.param.id)

    if (parkedToLotIndex > -1) {
        parkingLots.reserved = true;
        parkingLots.occipied = true;

        response.
            .status(200)
            .json({
                message: 'Parked onto lot'
            })
    } else {
        response.
            .status(400)
            .json({
                message: 'Cannot find the parking lot'
            })
    }
}

【讨论】：

假设在时间 t，汽车 1 被分配了空间 1，它需要 10 秒才能到达停车位 1。现在我的承诺将等待 10 秒，然后再执行嵌套。假设在时间 t+2，汽车 2 也被分配了空间 1，并且需要 3 秒才能到达停车位 1。现在，当汽车 2 在时间 t+5 到达停车位 1 时，promise 还需要再等待 5 秒对于汽车 1，但它需要调用汽车 2。这件事是自动处理的还是我需要做一些特定的事情？
谢谢。我设法用相同的想法解决了这个问题，但使用了 redux-thunk

【解决方案2】：

您可以为每个停车位单独使用 setTimeout()。

进行第一次 api 调用
在您的 api 中设置您超时适当的持续时间回调
在超时回调中执行下一步
根据需要重复

setTimeout() doc on W3 school

【讨论】：