Teilen Sie bessere Lösungen für die asynchrone JavaScript-Erfahrung

In diesem Artikel geht es hauptsächlich um eine bessere Lösung für die asynchrone JavaScript-Erfahrung. Freunde, die dies benötigen, können ihm als Referenz folgen.

1. Die Entwicklungsgeschichte asynchroner Lösungen
Der asynchrone Betrieb von JavaScript war schon immer ein problematisches Problem, weshalb immer wieder verschiedene Lösungen dafür vorgeschlagen werden. Es kann auf die früheste Rückruffunktion (ein alter Freund von Ajax), auf Promise (kein neuer Freund) und dann auf den ES6-Generator (ein mächtiger Freund) zurückgeführt werden.
Vor einigen Jahren haben wir vielleicht ein relativ bekanntes Async.js verwendet, aber es hat die Rückruffunktion nicht entfernt, und die Fehlerbehandlung folgte auch der Konvention „Der erste Parameter der Rückruffunktion wird zum Übergeben verwendet.“ Fehler". Die bekannte Callback-Hölle war immer noch ein großes Problem, bis Generator diesen asynchronen Stil änderte.
Aber mit dem Aufkommen von Async Await (Bunkers neuem Freund) können wir problemlos Code im synchronen Stil schreiben und gleichzeitig über einen asynchronen Mechanismus verfügen. Dies ist derzeit die einfachste, eleganteste und beste Lösung.

2. Async-Await-Syntax
Die Async-Await-Syntax ist relativ einfach und kann als syntaktischer Zucker für Generator betrachtet werden. Sie ist semantischer als Asterisk und Yield. Das Folgende ist ein einfaches Beispiel, das nach 1 Sekunde „Hallo Welt“ ausgibt:

function timeout(ms) {
 return new Promise((resolve) => {
  setTimeout(resolve, ms);
 });
}
async function asyncPrint(value, ms) {
 await timeout(ms);
 console.log(value)
}
asyncPrint('hello world', 1000);

await kann nur in asynchronen Funktionen verwendet werden. Bei Verwendung in normalen Funktionen tritt ein Fehler auf gemeldet werden

Auf „await“ folgt ein Promise-Objekt (natürlich sind auch andere Werte möglich, aber es wird in ein Promise gepackt, das sofort aufgelöst wird, was bedeutungslos ist)

wait wird warten Das Ergebnis des Promise wird zurückgegeben und dann wird die Ausführung fortgesetzt

Obwohl das Warten auf das Promise-Objekt erfolgt, besteht keine Notwendigkeit, .then() zu schreiben Der Rückgabewert kann direkt abgerufen werden. Nach der Feinabstimmung des obigen Codes wurde festgestellt, dass das Rückgabewertergebnis auch möglich ist:

function timeout(ms) {
 return new Promise((resolve) => {
  setTimeout(_ => {resolve('hello world')}, ms);
 });
}
async function asyncPrint(ms) {
 let result = await timeout(ms);
 console.log(result)
}
asyncPrint(1000);

3 . Async-Await-Fehlerbehandlung

Wie bereits erwähnt, muss „Await“ zwar auf ein Promise-Objekt warten, es muss jedoch nicht „Write .then()“ sein, Sie müssen also nicht wirklich „.catch“ schreiben (). Sie können Fehler direkt mit Try Catch abfangen. Dies kann redundanten und umständlichen Fehlerbehandlungscode vermeiden:

function timeout(ms) {
 return new Promise((resolve, reject) => {
  setTimeout(_ => {reject('error')}, ms);//reject模拟出错，返回error
 });
}
async function asyncPrint(ms) {
 try {
   console.log('start');
   await timeout(ms);//这里返回了错误
   console.log('end');//所以这句代码不会被执行了
 } catch(err) {
   console.log(err); //这里捕捉到错误error
 }
}
asyncPrint(1000);

Wenn vorhanden Wenn es sich um mehrere Wartevorgänge handelt, können sie in Try Catch zusammengefasst werden:

async function main() {
 try {
  const async1 = await firstAsync();
  const async2 = await secondAsync();
  const async3 = await thirdAsync();
 }
 catch (err) {
  console.error(err);
 }
}

4. Hinweis zum asynchronen Warten Klicken Sie auf

1). Wie bereits erwähnt, führt das Promise-Objekt hinter dem Befehl „await“ wahrscheinlich zu einer Ablehnung oder einem logischen Fehler. Daher ist es am besten, „await“ in den Try-Catch-Codeblock einzufügen.

2). Lassen Sie bei asynchronen Vorgängen mehrerer Wartebefehle diese gleichzeitig auslösen, wenn keine Abhängigkeit besteht.

const async1 = await firstAsync();
const async2 = await secondAsync();

Wenn im obigen Code async1 und async2 zwei unabhängige asynchrone Vorgänge sind, ist das Schreiben auf diese Weise zeitaufwändiger, da es erst danach ausgeführt wird firstAsync ist abgeschlossen. SecondAsync kann elegant mit Promise.all gehandhabt werden:

let [async1, async2] = await Promise.all([firstAsync(), secondAsync()]);

3). will Error:

async function main() {
 let docs = [{}, {}, {}];
 //报错 await is only valid in async function
 docs.forEach(function (doc) {
  await post(doc);
  console.log('main');
 });
}
function post(){
 return new Promise((resolve) => {
  setTimeout(resolve, 1000);
 });
}

Fügen Sie einfach async zur internen Methode forEach hinzu:

async function main() {
 let docs = [{}, {}, {}];
 docs.forEach(async function (doc) {
  await post(doc);
  console.log('main');
 });
}
function post(){
 return new Promise((resolve) => {
  setTimeout(resolve, 1000);
 });
}

But You Sie werden feststellen, dass die drei Hauptkanäle gleichzeitig ausgegeben werden, was bedeutet, dass der Beitrag gleichzeitig und nicht nacheinander ausgeführt wird. Das Problem kann durch Ändern der drei Hauptkanäle im Abstand von 1 Sekunde gelöst werden:

async function main() {
 let docs = [{}, {}, {}];
 for (let doc of docs) {
  await post(doc);
  console.log('main');
 }
}
function post(){
 return new Promise((resolve) => {
  setTimeout(resolve, 1000);
 });
}

Kurz gesagt, ich fühle mich erfrischt, nachdem ich Async Wait verwendet habe. Ich kann sehr prägnanten und eleganten Code verwenden, um verschiedene ausgefallene asynchrone Vorgänge zu implementieren, und im Fall komplexer Geschäftslogik muss ich nicht in einen Rückruf verfallen Hölle. Ich wage nicht zu sagen, dass dies die ultimative Lösung sein muss, aber es ist tatsächlich die derzeit eleganteste Lösung!

Verwandte Empfehlungen:

Was ist JavaScript asynchron?

Einführung in 4 Methoden der asynchronen Programmierung in Javascript

Detaillierte Erläuterung von Beispielen für die asynchrone Ausführung von JavaScript und die Steuerung des Betriebsflusses

Das obige ist der detaillierte Inhalt vonTeilen Sie bessere Lösungen für die asynchrone JavaScript-Erfahrung. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!