async/await in JS

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}

await wartet

await ist ein

Operator

, und das Ergebnis des Wartens ist ein Promise-Objekt oder ein anderer Wert, wie zum Beispiel:

Ergebnisausgabe:

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()

asynchrones Warten

await
Die Funktionsweise des Ausdrucks

hängt vom Ergebnis des Wartens ab. Wenn das, worauf gewartet wird, kein Promise-Objekt ist, Das Ergebnis der Operation ist das, worauf es wartet. ,

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

Für mehrere asynchrone Vorgänge können Promise's dann das Problem mehrschichtiger Rückrufe lösen.

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

async wird verwendet, um zu deklarieren, dass der Inhalt des Pakets synchron ausgeführt werden kann, während „await“ die Ausführungssequenz steuert. Jedes Mal, wenn ein „await“ ausgeführt wird, wird die Codeausführung blockiert und auf den „await“-Rückgabewert gewartet. und dann wird das anschließende Warten ausgeführt.

Die nach Warten aufgerufene Funktion muss ein Versprechen zurückgeben.

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

Das Promise-Objekt hinter dem Befehl „await“ kann abgelehnt werden. Daher ist es am besten, den Befehl „await“ in den Codeblock „try...catch“ einzufügen.

Wie man async/await try/catch schreibt

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

Empfohlene Lektüre:

Detaillierte Erläuterung der Verwendung von Mixins.js in React.js

CSS-Verwendung 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!