javascript - Nödvändigt async-await arbete med IndexedDB


Jag har en React TypeScript-app, i min app använder jag IndexedDB för att lagra viss data. Jag har en separat klass för att arbeta med IndexedDB som kallas DB. I en av mina klassmetoder använder jag denna kod för att hämta all data

 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;

} 

och i en av mina komponenthändelsehanterare

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

men getAll-funktionen fungerar bra utan async-await, så min fråga är: är det verkligen nödvändigt att använda async-await i getAll-funktionen?? Jag menar, finns det någon situation där jag behöver async-await

Jag försöker få all funktionskod utan async-await och det fungerar bra för mig

Svar #1

Nyckelorden async och await är i princip "syntaktiskt socker" för att arbeta med Promises på ett renare sätt. De är inte nödvändiga, men är mycket ofta användbara. Om dock hela funktionen bara skapar och returnerar ett Promise finns det liten nytta med dem.

Användningen som visas är redan överflödig. Du väntar på samma Promise två gånger. En gång här:

const promise = await new Promise((resolve,reject)=>{

Och en gång här:

return await promise;

Och eftersom funktionen är async, behöver du fortfarande använda await (eller följa med en callback) när du anropar den:

dataPro.then((resData)=>{

Som du observerar är detta allt mycket redundant och onödigt. Om funktionen själv inte internt await något så behöver den inte vara async. Den kan helt enkelt returnera den skapade Promise:

public getAll(){
  return new Promise((resolve,reject)=>{
    // the rest of the code in the Promise
  });
}

Och användningen av funktionen skulle inte förändras.

Om leverantören tillhandahåller ett API baserat på Promise kan du använda det och nyckelorden async och await kan hjälpa till att göra koden mycket enklare och lättare att förstå. Om de inte gör det, är det en vanlig metod att paketera annars asynkrona operationer (med callbacks/händelser/etc.) i en manuell Promise och returnera den så att konsumerande kod valfritt kan använda async och await (som du gör här).