java - 异步执行多个任务并在 JavaScript 函数中返回第一个成功的结果

Question

我必须编写一个 javaScript 函数来将一些数据返回给调用者。

在该函数中，我有多种方法来检索数据，即

1. 从缓存中查找
2. 从 HTML5 LocalStorage 中检索
3. 从 REST 后端检索(奖励:将新数据放回缓存中)

每个选项可能需要自己的时间才能完成，可能成功也可能失败。

我想做的是，异步/并行地执行所有这三个选项，并返回先返回的结果。

我知道在 JavaScript 中并行执行是不可能的，因为它是单线程的，但我想至少异步执行它们并在其中一个成功返回结果时取消其他任务。

我还有一个问题。

提前返回并继续执行 JavaScript 函数中的剩余任务。

示例伪代码:

function getOrder(id) {

    var order;

    // early return if the order is found in cache.
    if (order = cache.get(id)) return order;

    // continue to get the order from the backend REST API.
    order = cache.put(backend.get(id));

    return order;
}

请告知如何在 JavaScript 中实现这些要求。

目前发现的解决方案:

1. 最快的结果

   JavaScript ES6 解决方案

   引用:https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise

Promise.race(iterable)

Returns a promise that resolves when the first promise in the iterable resolves.

var p1 = new Promise(function(resolve, reject) { setTimeout(resolve, 500, "one"); });
var p2 = new Promise(function(resolve, reject) { setTimeout(resolve, 100, "two"); });
Promise.race([p1, p2]).then(function(value) {
  // value == "two"
});

Java/Groovy 解决方案

引用:http://gpars.org/1.1.0/guide/guide/single.html

import groovyx.gpars.dataflow.Promise
import groovyx.gpars.dataflow.Select
import groovyx.gpars.group.DefaultPGroup
import java.util.concurrent.atomic.AtomicBoolean

/**
 * Demonstrates the use of dataflow tasks and selects to pick the fastest result of concurrently run calculations.
 * It shows a waz to cancel the slower tasks once a result is known
 */

final group = new DefaultPGroup()
final done = new AtomicBoolean()

group.with {
    Promise p1 = task {
        sleep(1000)
        if (done.get()) return
        10 * 10 + 1
    }
    Promise p2 = task {
        sleep(1000)
        if (done.get()) return
        5 * 20 + 2
    }
    Promise p3 = task {
        sleep(1000)
        if (done.get()) return
        1 * 100 + 3
    }

    final alt = new Select(group, p1, p2, p3, Select.createTimeout(500))
    def result = alt.select()
    done.set(true)
    println "Result: " + result
}

1. 提前返回和互动功能

   Angular Promises 结合 ES6 生成器？？？

   angular.module('org.common')
   .service('SpaceService', function ($q, $timeout, Restangular, $angularCacheFactory) {
   
   
   var _spacesCache = $angularCacheFactory('spacesCache', {
       maxAge: 120000, // items expire after two min
       deleteOnExpire: 'aggressive',
       onExpire: function (key, value) {
           Restangular.one('organizations', key).getList('spaces').then(function (data) {
               _spacesCache.put(key, data);
           });
       }
   });
   /**
    * @class SpaceService
    */
   return {
       getAllSpaces: function (orgId) {
           var deferred = $q.defer();
           var spaces;
           if (spaces = _spacesCache.get(orgId)) {
               deferred.resolve(spaces);
           } else {
               Restangular.one('organizations', orgId).getList('spaces').then(function (data) {
                   _spacesCache.put(orgId, data);
                   deferred.resolve(data);
               } , function errorCallback(err) {
                   deferred.reject(err);
               });
           }
           return deferred.promise;
       },
       getAllSpaces1: function (orgId) {
           var deferred = $q.defer();
           var spaces;
           var timerID = $timeout(
               Restangular.one('organizations', orgId).getList('spaces').then(function (data) {
                   _spacesCache.put(orgId, data);
                   deferred.resolve(data);
               }), function errorCallback(err) {
                   deferred.reject(err);
               }, 0);
           deferred.notify('Trying the cache now...'); //progress notification
           if (spaces = _spacesCache.get(orgId)) {
               $timeout.cancel(timerID);
               deferred.resolve(spaces);
           }
           return deferred.promise;
       },
       getAllSpaces2: function (orgId) {
           // set up a dummy canceler
           var canceler = $q.defer();
           var deferred = $q.defer();
           var spaces;
   
           $timeout(
               Restangular.one('organizations', orgId).withHttpConfig({timeout: canceler.promise}).getList('spaces').then(function (data) {
                   _spacesCache.put(orgId, data);
                   deferred.resolve(data);
               }), function errorCallback(err) {
                   deferred.reject(err);
               }, 0);
   
   
           if (spaces = _spacesCache.get(orgId)) {
               canceler.resolve();
               deferred.resolve(spaces);
           }
   
           return deferred.promise;
       },
       addSpace: function (orgId, space) {
           _spacesCache.remove(orgId);
           // do something with the data
           return '';
       },
       editSpace: function (space) {
           _spacesCache.remove(space.organization.id);
           // do something with the data
           return '';
       },
       deleteSpace: function (space) {
           console.table(space);
           _spacesCache.remove(space.organization.id);
           return space.remove();
       }
   };
   });
   

Answer 1

就个人而言，我会按顺序尝试三种异步检索，从最便宜的开始到最昂贵的结束。然而，响应三个并行检索中的第一个是一个有趣的问题。

你应该能够利用 $q.all(promises) 的特性，通过它:

• 一旦任何 promise 失败，返回的 promise 就会被拒绝
• 如果所有 promise 都成功，则返回的 promise 得到解决。

但是你想反转这样的逻辑:

• 一旦任何 promise 成功，返回的 promise 就会被解决
• 如果所有 promise 都失败，则返回的 promise 将被拒绝。

这应该可以通过 invert() 实用程序实现，该实用程序将成功转换为失败，反之亦然。

function invert(promise) {
    return promise.then(function(x) {
        return $q.defer().reject(x).promise;
    }, function(x) {
        return $q.defer().resolve(x).promise;
    });
}

还有一个 first() 实用程序，以提供所需的行为:

function first(arr) {
    return invert($q.all(arr.map(invert)));
}

注意事项:

• 输入 arr 是一个 promises 数组
• 假定 array.map() 的本地实现(否则您可以显式循环以实现相同的效果)
• first() 中的外部 invert() 恢复了它返回的 promise 的正确含义
• 我在 Angular 方面不是特别有经验，所以我可能犯了语法错误 - 但我认为逻辑是正确的。

然后 getOrder() 将是这样的:

function getOrder(id) {
    return first([
        cache.get(id),
        localStorage.get(id).then(cache.put),
        backend.get(id).then(cache.put).then(localStorage.put)
    ]);
}

因此，getOrder(id) 应该返回订单的 Promise(而不是直接返回订单)。