Javascript 如何使用基于promise (非事件emits 器)的方法来传输数据

是的，this is possible，但是I wouldn't recommend it，因为async iterators are a bad fit是事件emits 器.即使你使用了103<ProgressEvent, Response, void>，使用它也是相当不经济的，因为使用for await … of循环你不会得到Response的结果.

• 对于pollJob，一个异步迭代器应该是可以的，因为a)你不在乎结果(它在完成时就停止了)，b)对于轮询，你永远不会比消费者快.您可以使用类似于您所做的那样的异步生成器来实现这一点:

  async function* pollForJob(workId) {
    while (true) {
      const res = await fetch(`/work/${workId}`)
      if (!res.ok) throw new Error('Failed to poll'); // or ignore and carry on
      yield res.json()
      await wait(2000)
    }
  }
  
  …
  for await (const of pollForJob(upload.jobId)) {
    if (json.status === 'complete') {
      break;
    } else if (json.status === 'running') {
      console.log('job continues for', json.estimatedFinish - Date.now());
    }
  }
  console.log('job has finished');
  …
  

  如果最终轮询实际上返回了处理结果，则图片看起来会不同.

• 对于upload，我建议实现一个微型的"事件循环"，其中每个进度事件调用一个提供的事件处理程序.当上载结束并且响应的promise 被解析时(或者当存在错误时，或者如果上载中止时)，事件循环终止.

  function upload(file, onProgress, abortSignal) {
    return new Promise((resolve, reject) => {
      abortSignal?.throwIfAborted();
      var fd = new FormData();
      fd.append("file", file);
  
      var xhr = new XMLHttpRequest();
      xhr.open("POST", "/upload", true);
  
      const stop = done => value => {
        abortSignal?.removeEventListener("abort", fail);
        if (xhr.readyState != 4) xhr.abort();
        reject(err);
      }
      const fail = stop(reject);
      abortSignals?.addEventListener("abort", fail);
  
      xhr.ontimeout = fail;
      xhr.onerror = fail;
      xhr.onload = stop(e => resolve(e.target));
  
      xhr.onprogress = e => {
        try {
          onProgress(e);
        } catch(err) {
          fail(err);
        }
      };
  
      xhr.send(fd);
    });
  }
  
  …
  const { status, response } = await upload(file, e => {
    var percentComplete = Math.ceil((e.loaded / e.total) * 100);
    console.log('completion', percentComplete);
  });