Eine kurze Analyse der asynchronen Funktion async/await von JS

Dieser Artikel stellt Ihnen die asynchrone Funktion async/await von JavaScript vor. Ich hoffe, er wird Ihnen hilfreich sein!

async/await, eingeführt in ES7, ist eine Verbesserung der asynchronen Programmierung in JavaScript, die die Möglichkeit bietet, asynchron mit Code im synchronen Stil auf Ressourcen zuzugreifen, ohne den Hauptthread zu blockieren. Es ist jedoch etwas schwierig, es gut zu nutzen. In diesem Artikel beleuchten wir async/await aus verschiedenen Perspektiven und zeigen, wie man sie richtig und effizient nutzt. async/await 是对 JavaScript 异步编程的一种改进，它提供了使用同步样式代码异步访问资源的选项，而不会阻塞主线程。但是，要很好地使用它有点棘手。在本文中，将从不同的角度探索 async/await，并展示如何正确有效地使用它们。

async/await 好处

async/await 带来的最重要的好处就是同步编程风格，先来看一个例子。

// async/await
const getArticlesByAuthorWithAwait = async (authorId) => {
    const articles = await articleModel.fetchAll();
    return articles.filter((b) => b.authorId === authorId);
};

// promise
const getArticlesByAuthorWithPromise = (authorId) => {
    return articleModel
        .fetchAll()
        .then((articles) => articles.filter((b) => b.authorId === authorId));
};

很明显，async/await 版本比 promise 版本更容易理解。如果忽略 await 关键字，代码看起来就像任何其他同步语言，如 Python。

同时 async/await 有原生浏览器支持，截至目前，所有主流浏览器都已全面支持异步功能。

需要注意的是 async/await 在使用的过程中需要成对出现，如在函数里面要使用 await ，就必须将函数定义为 async 。

async/await 可能会产生误导

有些文章将 async/await 与 Promise 进行比较，并声称它是 JavaScript 异步编程发展的下一代，这一点个人觉得有点误导，个人认为 async/await 是一种改进，一个语法糖，不会彻底改变编程风格。

本质上，异步函数仍然是 promises，在正确使用异步函数之前，必须了解 promises。

• Promise.any() 原理解析及使用指南
• Promise.all() 原理解析及使用指南
• Promise.race() 原理解析及使用指南
• Promise.allSettled() 原理解析及使用指南

async/await 陷阱

尽管 await 可以使代码看起来像同步的，但请记住它们仍然是异步的，必须注意避免过于顺序化。

const getArticlesAndAuthor = async (authorId) => {
    const articles = await articleModel.fetchAll();
    const author = await authorModel.fetch(authorId);
    return {
        author,
        articles: articles.filter((article) => article.authorId === authorId),
    };
};

这段代码在逻辑上看起来是正确的，然而这是回产生误解。

• await articleModel.fetchAll() 将等到 fetchAll() 返回。

• 然后 await authorModel.fetch(authorId) 将会被立即调用。

错误处理

使用 promise，异步函数有两个可能的返回值：resolve 和 reject，以用于正常情况使用 .then() 和异常情况使用.catch()。然而，async/await 错误处理就不太好，需要使用 try...catch 来捕获异常。

const getArticlesByAuthorWithAwait = async (authorId) => {
    try {
        const articles = await articleModel.fetchAll();
        return articles.filter((b) => b.authorId === authorId);
    } catch (error) {
        // 错误处理
    }
};

总结

async/await

Vorteile von async/await

Der wichtigste Vorteil von async/await ist der synchrone Programmierstil Schauen wir uns zunächst ein Beispiel an.

rrreeeOffensichtlich ist die async/await-Version einfacher zu verstehen als die promise-Version. Wenn Sie das Schlüsselwort await weglassen, sieht der Code wie jede andere synchrone Sprache aus, beispielsweise Python.

Gleichzeitig wird async/await von nativen Browsern unterstützt. Ab sofort verfügen alle gängigen Browser über vollständig unterstützte asynchrone Funktionen. 🎜

🎜Es ist zu beachten, dass async/await während der Verwendung paarweise erscheinen muss. Wenn Sie await in einer Funktion verwenden möchten, müssen Sie die Funktion definieren als async . 🎜

async/await kann irreführend sein

🎜Einige Artikel vergleichen async/await mit Compare Versprechen und behaupten, dass es sich um die nächste Generation der asynchronen Programmierung in JavaScript handelt. Ich persönlich denke, dass async/await eine Verbesserung darstellt syntaktischer Zucker wird den Programmierstil nicht revolutionieren. 🎜🎜Im Wesentlichen sind asynchrone Funktionen immer noch Versprechen. Bevor Sie asynchrone Funktionen richtig verwenden, müssen Sie Versprechen verstehen. 🎜

• Versprechen .any() Prinzipanalyse- und Nutzungsleitfaden🎜
• Promise.all() Prinzipanalyse- und Nutzungsleitfaden🎜
• Promise.race() Prinzipanalyse und Leitfaden zur Nutzung🎜
• Promise.allSettled() Prinzipanalyse- und Nutzungsleitfaden🎜

async/await-Fallstricke

🎜Obwohl await dazu führen kann, dass Code synchron aussieht, denken Sie daran, dass er immer noch asynchron ist. Vorsicht ist geboten darauf geachtet werden, nicht zu sequentiell zu sein. 🎜rrreee🎜Dieser Code sieht logisch korrekt aus, ist jedoch irreführend. 🎜

• 🎜await ArticleModel.fetchAll() wartet, bis fetchAll() zurückkehrt. 🎜
• 🎜Dann wird await authorModel.fetch(authorId) sofort aufgerufen. 🎜

Fehlerbehandlung

🎜Mit promise gibt es zwei asynchrone Funktionen Mögliche Rückgabewerte: resolve und reject, für Normalfälle mit .then() und für Ausnahmen mit .catch() Code>. Allerdings ist die Fehlerbehandlung mit <code>async/await nicht sehr gut und Sie müssen try...catch verwenden, um Ausnahmen abzufangen. 🎜rrreee

Summary

🎜async/await ist sehr leistungsfähig, es gibt jedoch einige Einschränkungen. Bei richtiger Anwendung können sie jedoch dennoch dazu beitragen, den Code effizient und gut lesbar zu machen. 🎜🎜【Empfohlenes Lernen: 🎜Javascript-Tutorial für Fortgeschrittene🎜】🎜

Das obige ist der detaillierte Inhalt vonEine kurze Analyse der asynchronen Funktion async/await von JS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!