JS의 비동기 함수 async/await에 대한 간략한 분석

이 글은 여러분에게 JavaScript의 비동기 함수 async/await를 소개하겠습니다. 도움이 되셨으면 좋겠습니다!

ES7에 도입된 async/await는 JavaScript의 비동기 프로그래밍에 대한 개선 사항으로, 메인 스레드를 차단하지 않고 동기 스타일 코드를 사용하여 리소스에 비동기적으로 액세스할 수 있는 옵션을 제공합니다. 다만, 잘 활용하기가 조금 까다롭습니다. 이 글에서는 다양한 관점에서 async/await를 살펴보고 이를 정확하고 효율적으로 사용하는 방법을 보여드리겠습니다. 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 이점

rrreee분명히 async/await 버전은 promise 버전보다 이해하기 쉽습니다. await 키워드를 생략하면 코드는 Python과 같은 다른 동기 언어처럼 보입니다.

🎜함수에서 await를 사용하려면 async/await가 쌍으로 나타나야 한다는 점에 유의하세요. 비동기 입니다. 🎜

async/await는 오해의 소지가 있을 수 있습니다

• 약속 .any() 원리 분석 및 사용 가이드🎜
• Promise.all() 원칙 분석 및 사용 가이드🎜
• Promise.race() 원리 분석 및 사용 가이드🎜
• Promise.allSettled() 원칙 분석 및 사용 가이드🎜

async/await 함정

• 🎜await articleModel.fetchAll()은 fetchAll()이 반환될 때까지 기다립니다. 🎜
• 🎜그러면 awaitauthorModel.fetch(authorId)가 즉시 호출됩니다. 🎜

오류 처리

요약

위 내용은 JS의 비동기 함수 async/await에 대한 간략한 분석의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!