如何使用async/await改写基于Promise的FileReader函数？

由于FileReader是基于事件回调的API，没有原生Promise支持，所以必须先通过Promise封装其异步逻辑，而async/await只是Promise的语法糖，因此最优的改写是在保留Promise封装核心的基础上，用async声明函数（明确异步语义），同时简化内部逻辑，最终可以通过await调用该函数。

改写后的代码：

async function readFileAsync(file) {
  return new Promise((resolve, reject) => {
    const reader = new FileReader();
    reader.onload = () => resolve(reader.result);
    reader.onerror = reject;
    reader.readAsArrayBuffer(file);
  });
}

关键说明 #

• 添加async关键字后，函数依然返回Promise，既符合async函数的特性，也让函数的异步语义更清晰。
• 简化了onload的回调逻辑，直接将读取结果传入resolve，代码更简洁。
• 错误处理直接复用reject，保持原有的错误传递逻辑。

调用示例 #

使用await调用该函数时，需要包裹在async函数中，并通过try/catch处理错误：

async function processFile(file) {
  try {
    const arrayBuffer = await readFileAsync(file);
    // 处理读取到的ArrayBuffer数据
    console.log('文件读取完成:', arrayBuffer);
  } catch (error) {
    console.error('文件读取失败:', error);
  }
}

内容的提问来源于stack exchange，提问作者ksusha-beep