JS의 비동기 함수 async/await에 대한 간략한 분석-JS 튜토리얼-php.cn

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

青灯夜游

풀어 주다： 2023-01-28 19:17:19

앞으로

2410명이 탐색했습니다.

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

JS의 비동기 함수 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。

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 이점

async/await이 가져오는 가장 중요한 이점은 동기식 프로그래밍 스타일입니다. , 먼저 예를 살펴보겠습니다.

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

동시에 async/await는 기본 브라우저에서 지원됩니다. 현재 모든 주요 브라우저는 비동기 기능을 완벽하게 지원합니다. 🎜

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

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

🎜일부 기사에서는 async/await를 Compare와 비교합니다. 약속하고 이것이 JavaScript의 차세대 비동기 프로그래밍이라고 주장합니다. 저는 개인적으로 이것이 약간 오해의 소지가 있다고 생각합니다. 구문 설탕은 프로그래밍 스타일에 혁명을 일으키지 않습니다. 🎜🎜본질적으로 비동기 함수는 여전히 프라미스입니다. 비동기 함수를 올바르게 사용하기 전에 프라미스를 이해해야 합니다. 🎜

async/await 함정

🎜await가 코드를 동기식으로 보이게 만들 수 있지만 여전히 비동기식이라는 점을 기억하세요. 너무 순차적이지 않도록 주의하세요. 🎜rrreee🎜이 코드는 논리적으로는 정확해 보이지만 오해의 소지가 있습니다. 🎜

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

오류 처리

🎜 promise를 사용하면 두 가지 비동기 함수가 있습니다. 가능한 반환 값: resolve 및 reject. 일반적인 경우에는 .then()를 사용하고 예외에는 .catch( )를 사용합니다. 코드>. 그러나 <code>async/await 오류 처리는 그다지 좋지 않으며 예외를 포착하려면 try...catch를 사용해야 합니다. 🎜rrreee