Question

我是网络开发的初学者，目前正在学习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应用程序正常运行

一出现汽车，我就会调用一个向getOptimalParking api发出请求的redux操作，然后我会在substractOneParkingSlot秒之后再调用Ci api的另一个redux操作。< / p>

由于我有多个此类并发调用redux操作，如何实现这一目标？

由于

编辑： - 对于未来的读者，有一个非常详细的答案here。

Answer 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())
        })
}

由于承诺可以从一个承诺到另一个承诺，我们也可以完全改变或发送新承诺。在节点返回位置之后，将创建并返回一个新的承诺，该承诺将以距离秒为单位解析承诺。在第二次解决后，我们调用dispatch(onParkedInoSpace())。

上面的代码也可以缩放，让new Promise拒绝并被捕获，并告知Node它丢失了！

更新其他更改：两辆车争夺相同的空间。

当第一辆车的setTimeout执行时，第二辆车将占用它，因为它更接近。要解决此问题，您需要将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'
            })
    }
}

Answer 2

你可以独立地为每个停车位使用setTimeout（）。

做第一次api通话
在api中设置适当的持续时间回调
执行超时回调中的下一步
尽可能多地重复

setTimeout() doc on W3 school

如何同步处理api请求，每个请求等待几秒钟

2 个答案: