javascript - 如何修复 promise i̶n̶ ̶F̶i̶r̶e̶f̶o̶x̶？

Question

这是我的 Promise 代码的简化示例:

var sharedLocalStream = null;
// ...
function getVideoStream() {
  return new Promise(function(resolve, reject) {
    if (sharedLocalStream) {
      console.log('sharedLocalStream is defined');
      resolve(sharedLocalStream);
    } else {
      console.log('sharedLocalStream is null, requesting it');
      navigator
          .mediaDevices
          .getUserMedia(constraints)
          .then(function(stream) {
            console.log('got local videostream', stream);
            sharedLocalStream = stream;
            resolve(sharedLocalStream);
          })
          .catch(reject);
    }
  });
}

我在多个地方异步使用此函数。该问题与以下事实有关:函数至少被调用两次，但在第二次调用中，promise 永远不会得到解决/拒绝。这段代码在 Chrome 中完美运行。我还尝试使用 Angular Promise 服务 $q，但它也不起作用。

我做错了什么以及如何使这段代码工作？

此外，我想了很多如何在这种情况下避免 promise ，但我别无选择，因为当用户确认麦克风和摄像头访问请求时我被迫等待。

更新:

var constraints = {
    audio: true,
    video: true
  };

Answer 1

如果 getVideoStream()，则您的代码存在并发问题被调用两次。因为getVideoStream()时没有强制排队或排序。在第一次调用它更新 sharedLocalStream 之前被第二次调用变量，您很容易会遇到这样的情况:在 sharedLocalStream 之前启动两个调用之前创建两个流。有一个值。

这是代码设计的问题，而不是运行代码的平台的问题。解决这个问题的通常方法是将第一个操作的 promise 存储到共享变量中。然后你测试看看里面是否已经有一个 promise 。如果有的话，你只需返回该 promise 即可。

如果您缓存 Promise 而不是流，则可以像这样简单地执行此操作:

var sharedLocalStreamPromise = null;
function getVideoStream() {
    // if we've already requested a local stream, 
    // return the promise who's fulfilled value is that stream
    if (!sharedLocalStreamPromise) {
        sharedLocalStreamPromise = navigator.mediaDevices.getUserMedia(constraints).catch(function(err) {
            // clear the promise so we don't cache a rejected promise
            sharedLocalStreamPromise = null;
            throw err;
        });
    }
    return sharedLocalStreamPromise;
}

第一次调用将初始化sharedLocalStreamPromise到一个 promise 。当第二个调用(或任何后续调用)到来时，它只会返回相同的 promise 。

我正在考虑这段代码的边缘情况。如果 Promise 被拒绝，并且已经发生了对同一函数的第二次调用，那么它也会有被​​拒绝的 Promise。