进行多个api调用时如何选择最新的api调用

Question

当重复进行多个API调用时，我们遇到了一个问题，UI有时会呈现错误的数据。

例：

onPageLoad事件我有5个API调用，并且有日期选择器，可以从中选择日期。 当用户尝试更改日期选择器时，将进行所有5个API调用以刷新数据，假设最初我是在上一天选择的，并且页面已加载，现在我更改为上周，然后是一个月，然后又回到了最后一天，现在有15个异步进行了API调用，并且在UI中，我们渲染了最近到达的任何API调用（由于JS中的异步行为）。 是否有任何机制可以控制此行为。

预期：

在上面的示例中，我只想在UI中显示最新的API调用数据（无论何时解决承诺），我只想显示前一天的数据。

Answer 1

使用此代码，任何先前的api调用都会被拒绝。 这意味着只有最后一个电话才能解决。

var timeout;

function callApi() {
    // Cancel any previous api call:
    timeout && timeout.resolve();

    // Create a new timeout:
    timeout = $q.defer();

    // Make the api call, passing in the timeout:
    return $http.get('/api', {timeout: timeout.promise});
}