Une brève analyse de la fonction asynchrone de JS async/await

Cet article vous présentera la fonction asynchrone de JavaScript async/await. J'espère qu'il vous sera utile !

async/await introduit dans ES7 est une amélioration de la programmation asynchrone en JavaScript qui offre la possibilité d'accéder aux ressources de manière asynchrone en utilisant un code de style synchrone sans bloquer le thread principal. Cependant, il est un peu délicat de bien l'utiliser. Dans cet article, nous explorerons async/await sous différentes perspectives et montrerons comment les utiliser correctement et efficacement. 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

Async/await

L'avantage le plus important apporté par async/await est le style de programmation synchrone , regardons d'abord un exemple.

rrreeeÉvidemment, la version async/await est plus facile à comprendre que la version promise. Si vous omettez le mot-clé await, le code ressemblera à n'importe quel autre langage synchrone, tel que Python.

Dans le même temps, async/await est pris en charge par les navigateurs natifs. À l'heure actuelle, tous les principaux navigateurs prennent entièrement en charge les fonctions asynchrones. 🎜

🎜Il est à noter que async/await doit apparaître par paires lors de l'utilisation. Si vous souhaitez utiliser await dans une fonction, vous devez définir la fonction. comme async . 🎜

async/await peut être trompeur

🎜Certains articles comparent async/await avec Compare Promesse et affirme qu'il s'agit de la prochaine génération de programmation asynchrone en JavaScript. Je pense personnellement que c'est un peu trompeur. Je pense personnellement que async/await est une amélioration et une amélioration. le sucre syntaxique ne révolutionnera pas le style de programmation. 🎜🎜Essentiellement, les fonctions asynchrones sont toujours des promesses. Avant d'utiliser correctement les fonctions asynchrones, vous devez comprendre les promesses. 🎜

• Promesse Guide d'analyse et d'utilisation du principe .any()🎜
• Guide d'analyse et d'utilisation du principe Promise.all()🎜
• Guide d'analyse et d'utilisation du principe Promise.race()🎜
• Promise.allSettled() guide d'analyse et d'utilisation du principe🎜

pièges async/await

🎜Bien que await puisse donner l'impression que le code est synchrone, rappelez-vous qu'il est toujours asynchrone, il faut faire attention être prises pour éviter d'être trop séquentielles. 🎜rrreee🎜Ce code semble logiquement correct, mais il est trompeur. 🎜

• 🎜await articleModel.fetchAll() attendra le retour de fetchAll(). 🎜
• 🎜Ensuite, await authorModel.fetch(authorId) sera appelé immédiatement. 🎜

Gestion des erreurs

🎜En utilisant promise, il existe deux fonctions asynchrones Valeurs de retour possibles : resolve et reject, pour les cas normaux en utilisant .then() et pour les exceptions en utilisant .catch( ) code>. Cependant, la gestion des erreurs <code>async/await n'est pas très bonne et vous devez utiliser try...catch pour intercepter les exceptions. 🎜rrreee

Résumé

🎜async/await est très puissant, mais il y a quelques mises en garde. Mais s’ils sont utilisés correctement, ils peuvent quand même contribuer à rendre le code efficace et hautement lisible. 🎜🎜【Apprentissage recommandé : 🎜Tutoriel avancé javascript🎜】🎜

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!