如何在 Javascript 中同步讀取 Blob？

Question

我正在編寫一個 chrome 擴展來攔截 WebSocket 流量，通過掛鈎 function WebSocket.send ，如：

var _send = WSObject.send
WSObject.send = function (data) {
    arguments[0] = my_hook_function(data)
    _send.apply(this, arguments)
}

function my_hook_function(data) {
    // how to read the data here synchronously?
    return data
}

my_hook_function應該是同步的。 數據類型是 Blob，我找不到同步的 API 用於讀取 Blob。 谷歌說有FileReaderSync ，但我在控制台中試過，這個 class 不存在。

如何解決？

Answer 1

客戶端 JavaScript 中沒有同步FileReader 。 而且你也不能讓它同步。 因此，您應該將所有內容都設為 async 。

使用常規FileReader object 並將其包裝在Promise內。 通過使用async / await ，您可以等待文件閱讀器完成，然后再繼續並發送值。

var _send = WSObject.send
WSObject.send = async function(data) {
  const result = await my_hook_function(data);
  _send.call(this, result);
};

function my_hook_function(data) {
  return new Promise((resolve, reject) => {
    const reader = new FileReader();
    reader.onload = ({ target }) => resolve(target.result);
    reader.onerror = error => reject(error);
    reader.readAsText(data);
  });
}

旁注：如果WSObject.send需要一個參數，那么.call方法就足夠了。 它與.apply類似，唯一的區別是.call期望一個或多個 arguments 通過，而.apply是一個 arguments 數組。

此外，盡量避免使用arguments object 並盡可能使用rest 參數。