Dieses Mal werde ich Ihnen Async/Await in JS vorstellen. Was sind die Vorsichtsmaßnahmen bei der Verwendung von Async/Await in JS? Das Folgende ist ein praktischer Fall, schauen wir uns das an.
Asynchrone Operationen in JS haben sich von der anfänglichen Callback-Funktion zu Promise und dann zu Generator entwickelt, was alles schrittweise Verbesserungen darstellt. Das Aufkommen asynchroner Funktionen scheint das Ende der asynchronen Lösung zu bedeuten . Asynchrones Schreiben auf synchrone Weise verwenden.
Eine kurze Erklärung der asynchronen Funktion ist der syntaktische Kern der Generatorfunktion.
So schreiben Sie die Generator-Funktion
let promise = function (val){ return new Promise(function (resolve, reject){
setTimeout(()=>{ console.log(val);
resolve(val);
},1000);
});
};let gen = function* (){ let p1 = yield promise('1'); let p2 = yield promise('2');
};let genF = gen();So schreiben Sie die asynchrone Funktion
let promise = function (val){ return new Promise(function (resolve, reject){
setTimeout(()=>{ console.log(val);
resolve(val);
},1000);
});
};let gen = async function (){ let p1 = await promise('1'); let p2 = await promise('2');
};Die asynchrone Funktion ist eine Verbesserung der Generator-Funktion in der Syntax. Das Sternchen der Generator-Funktion wird durch „Async“ und yield durch „await“ ersetzt.
Und async unterscheidet sich auch von der Generator-Funktion:
verfügt über einen integrierten Executor, die Generator-Funktion muss sich auf den Executor verlassen, und async kann mit einer normalen Funktion identisch sein, nur einen Zeile wird benötigt
relativ zur Generatorfunktion, Async- und Wait-Semantik ist klarer
Starke Anwendbarkeit, yield kann nur Thunk-Funktionen und Promise-Objekte sein, während waiting Promise-Objekte und primitive Typwerte sein kann (numerische Werte, Zeichenfolgen , boolesche Werte usw.)
Die Rolle von Async
Die an die Async-Funktion gestellte Erwartung besteht darin, uns bei der Lösung asynchroner Betriebsprobleme zu helfen , also müssen wir den Rückgabewert der asynchronen Funktion verstehen. Was ist das?
async function asyncAwait() { return 'async await';
}let a = asyncAwait();console.log(a);Ergebnisausgabe:
Promise {<resolved>: "async await"}Es ist ersichtlich, dass die asynchrone Funktion ein Promise-Objekt zurückgibt. Wenn in der Funktion ein direkter Wert zurückgegeben wird, wird die asynchrone Funktion gekapselt in ein Promise-Objekt umwandeln und zurückgeben. Wenn kein Rückgabewert vorhanden ist, gibt die asynchrone Funktion undefiniert zurück. Wenn „await“ nicht kombiniert wird, wird die asynchrone Funktion sofort ausgeführt und gibt ein Promise-Objekt zurück.
Promise {<resolved>: undefined}Operator
, und das Ergebnis des Wartens ist ein Promise-Objekt oder ein anderer Wert, wie zum Beispiel:function func1() { return 'async';
}async function func2() { return Promise.resolve('await');
}async function asyncAwait() { let f1 = await func1(); let f2 = await func2(); console.log(f1, f2);
}
asyncAwait()await
Die Funktionsweise des Ausdrucks
Und wenn es auf ein Promise-Objekt wartet, blockiert es den nachfolgenden Code, wartet auf die Auflösung des Promise-Objekts und erhält dann den aufgelösten Wert als Operationsergebnis des Ausdrucks. Asynchrone Funktionsaufrufe werden in Promise gekapselt, weshalb „await“ in asynchronen Funktionen verwendet werden muss.
Asynchrone/Wartekettenverarbeitung
submit();
function ajax(t) { return new Promise(resolve => {
setTimeout(() => resolve(t + 200), t);
});
}function step1(t) { console.log(`step1 in ${t}ms`); return ajax(t);
}function step2(t) { console.log(`step2 in ${t}ms`); return ajax(t);
}function step3(t) { console.log(`step3 in ${t}ms`); return ajax(t);
}function submit(){ console.time('submit');
step1(200)
.then(time2 => step2(time2))
.then(time3 => step3(time3))
.then(result => { console.log(`result is ${result}ms`); console.timeEnd("submit");
});
}asynchrone Funktionsimplementierung:
Ergebnisausgabe:
function ajax(t) { return new Promise(resolve => {
setTimeout(() => resolve(t + 200), t);
});
}function step1(t) { console.log(`step1 in ${t}ms`); return ajax(t);
}function step2(t) { console.log(`step2 in ${t}ms`); return ajax(t);
}function step3(t) { console.log(`step3 in ${t}ms`); return ajax(t);
}async function submit(){ console.time('submit'); const t1 = 200; const t2 = await step1(t1); const t3 = await step2(t2); const result = await step3(t3); console.log(`result is ${result}`); console.timeEnd('submit');
}
submit();Und bei Bedarf Nach der Änderung sind die Parameter jedes Schritts die Ergebnisse der vorherigen Schritte. Die asynchrone Funktion kann wie folgt geschrieben werden:
step1 in 200ms step2 in 400ms step3 in 600ms result is 800submit: 1209.85107421875ms
Ergebnisausgabe:
function ajax(t) { return new Promise(resolve => {
setTimeout(() => resolve(t + 200), t);
});
}function step1(t1) { console.log(`step1 in ${t1}ms`); return ajax(t1);
}function step2(t1, t2) { console.log(`step2 in ${t1}ms,${t2}ms`); return ajax(t1 + t2);
}function step3(t1, t2, t3) { console.log(`step3 in ${t1}ms,${t2}ms,${t3}ms`); return ajax(t1 + t2 + t3);
}async function submit(){ console.time('submit'); const t1 = 200; const t2 = await step1(t1); const t3 = await step2(t1, t2); const result = await step3(t1, t2, t3); console.log(`result is ${result}`); console.timeEnd('submit');
}
submit();async/await zeigt auf Hinweis
step1 in 200ms step2 in 200ms,400ms step3 in 200ms,400ms,800ms result is 1600submit: 2210.47998046875ms
Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln Artikel auf der chinesischen PHP-Website!
async function asyncAwait() { try { await promise();
} catch (err) { console.log(err);
}
}// 另一种写法async function asyncAwait() { await promise().catch(function (err){ console.log(err);
});
}Detaillierte Erläuterung der Verwendung von Mixins.js in React.js
Das obige ist der detaillierte Inhalt vonasync/await in JS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
