javascript - 如何导出可观察值并分配给变量？

Question

我试图将一个可观察对象的值赋给一个变量，但它返回未定义。

有没有办法将这个值赋给订阅方法之外的变量？

new Observable((observer) => {
  const reader = new FileReader();
  reader.onload = () => {
    observer.next(reader.result);
    observer.complete();
  };
  reader.onerror = e => observer.error(e);
  reader.readAsDataURL(file);
  return () => {
    if (reader.readyState === 1) {
      reader.abort();
    }
  };
});
let result;
getBase64(blob)
 .subscribe((base64) => { result = base64; });
return result;

Answer 1

您可能遇到了 difference between synchronous and asynchronous programming .

简而言之，result立即返回，而 observer.next仅调用一次 onload函数在 future 的某个时间执行，可能立即、几秒后，甚至永远不会执行。

因此，一旦您尝试执行异步操作，您实际上必须将结果处理程序作为不同的代码块来执行。

如果我想从 FileReader 获得结果，我通常会采用 promise 方法(而不是 Observable)，因为我只期望一个值(或一个错误)。虽然相似，但 Promises 更简单一些，而 Observables 更强大。

一个粗略的例子:

function getFileContents(file) {
  return new Promise((resolve, reject) => {
    var reader = new FileReader();
    reader.onload = evt => resolve(evt.target.result);
    reader.onerror = err => reject(err);
    reader.readAsText(file);
  });
}

这个函数会给你返回一个Promise<string> (包含字符串的 promise )。不过，您仍然需要“打开”promise 以获得内部值(使用 then 或 async/await 风格的编程)。

如果你真的确定你想要一个 observable，那么我可能仍然会使用上面的 promise 函数，但是这样调用它:

import { from } from 'rxjs'; 

function getFileContents(file) {
  ...
}

const myObservable = from(getFileContents(fileBlob));