Gibt es eine bessere Lösung als asynchron mit JavaScript?

In diesem Artikel erfahren Sie hauptsächlich eine bessere Lösung für die asynchrone JavaScript-Erfahrung. Freunde, die diesen Aspekt 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 ein paar 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 wird ein Fehler gemeldet gefolgt von einem Promise-Objekt (natürlich sind auch andere Werte möglich, aber es wird in ein sofort aufgelöstes Promise verpackt, was bedeutungslos ist)

await wartet auf die Rückkehr des Promise-Ergebnisses, bevor es fortfährt Um

await auszuführen, ist es ein Promise-Objekt, aber Sie müssen nicht .then() schreiben. Sie können den Rückgabewert direkt abrufen Das Rückgabewertergebnis kann auch „Hallo Welt“ ausgeben:

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, besteht zwar keine Notwendigkeit, „.then“ zu schreiben, obwohl „Await“ auf ein Promise-Objekt wartet (), daher ist es nicht erforderlich, .catch() zu schreiben. Sie können Fehler direkt mit Try Catch abfangen, wodurch mühsamer Fehlerbehandlungscode vermieden werden kann. Dies ist zu umständlich. Lassen Sie uns das obige Beispiel verfeinern:

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 es mehrere Waits gibt, können diese 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. Hinweise zum asynchronen Wait

1). Wie bereits erwähnt, das Promise-Objekt hinter dem Wait-Befehl führt wahrscheinlich zu einer Ablehnung oder einem logischen Fehler. Daher ist es am besten, „await“ in den Codeblock „try-catch“ 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 Async1 und Async2 im obigen Code zwei unabhängige asynchrone Vorgänge sind, ist das Schreiben auf diese Weise zeitaufwändiger, da SecondAsync erst ausgeführt wird, wenn FirstAsync abgeschlossen ist. Dies kann elegant mit Promise gehandhabt werden .all :

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

3). Bei Verwendung in normalen Funktionen wird ein Fehler gemeldet:

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);
 });
}

Aber Sie werden feststellen, dass drei Mains gleichzeitig ausgegeben werden, was bedeutet, dass die Post gleichzeitig und nicht nacheinander ausgeführt wird. Das Problem kann gelöst werden. Die drei Mains werden im Abstand von einer Sekunde ausgegeben.

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 muss nicht in die Callback-Hölle geraten, wenn die Geschäftslogik komplex ist . Mitte. Ich wage nicht zu sagen, dass dies die ultimative Lösung sein muss, aber es ist tatsächlich die derzeit eleganteste Lösung!

Ich habe das Obige für Sie zusammengestellt und hoffe, dass es Ihnen in Zukunft hilfreich sein wird.

Verwandte Artikel:

So integrieren Sie zTree-Code in Angular

Node-Packaging-Tool Pkg (ausführliches Tutorial)

Wie verwende ich js, um eine App in WeChat aufzurufen?

Das obige ist der detaillierte Inhalt vonGibt es eine bessere Lösung als asynchron mit JavaScript?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!