在React TypeScript项目中，操作IndexedDB的getAll方法是否需用async-await？

我有一个React TypeScript应用，使用IndexedDB存储数据，并有一个单独的DB类用于操作IndexedDB。该类中的getAll方法实现如下：

public async getAll(){
 const promise = await new Promise((resolve,reject)=>{
    const req = this.openDB();
    req.addEventListener("error", (e) => {
      console.log("error ", e);
      reject ("error");
    });

    req.addEventListener("success", () => {
      const db = req.result;
      const tx = db.transaction("tasks", "readonly");
      tx.addEventListener("complete", () => {
        console.log("transaction complete");
        db.close();
      });

      const readObj = tx.objectStore("tasks");
      const data = readObj.getAll();
      
      data.addEventListener("success",(e)=>{
        console.log(data);
        console.log(e);
        resolve (data.result);
      });

    });
 });

 return await promise;
} 

在组件事件处理器中调用该方法的代码如下：

const db = new DB();
const dataPro = db.getAll();
dataPro.then((resData)=>{
  console.log(resData); // I have Data I need it
})

目前该getAll方法在使用async-await时能正常工作，但去掉async-await后也能正常运行。因此我想询问：该getAll方法中是否真的有必要使用async-await？是否存在必须使用该语法的场景？

结论：当前实现完全不需要async-await #

你现在的getAll方法只是手动创建了一个Promise，随后又await它再返回——这完全是多余的操作。因为new Promise(...)本身就会返回一个Promise对象，直接返回这个Promise即可，没必要套一层async-await。

去掉async-await后的简洁写法：

public getAll() {
  return new Promise((resolve, reject) => {
    const req = this.openDB();
    req.addEventListener("error", (e) => {
      console.log("error ", e);
      reject("error");
    });

    req.addEventListener("success", () => {
      const db = req.result;
      const tx = db.transaction("tasks", "readonly");
      tx.addEventListener("complete", () => {
        console.log("transaction complete");
        db.close();
      });

      const readObj = tx.objectStore("tasks");
      const data = readObj.getAll();
      
      data.addEventListener("success",(e)=>{
        console.log(data);
        console.log(e);
        resolve(data.result);
      });
    });
  });
}

必须使用async-await的场景 #

只有当你在方法内部需要等待其他异步操作完成，或者需要把同步逻辑的返回值自动包装成Promise时，async-await才是必要的：

• 比如方法内需要先调用另一个异步方法（如await this.initDB()），再执行后续逻辑，此时用async-await能让代码更线性易读，避免嵌套回调地狱。
• 若你想让一个原本同步的方法返回Promise，直接给方法加async关键字即可，无需手动创建Promise。

但在你当前的场景中，没有任何需要等待的异步操作（只是手动封装了Promise），所以async-await完全没必要。

内容的提问来源于stack exchange，提问作者Areza-s1011