비동기의 힘을 살펴보고 JavaScript에서 기다리세요

이전 튜토리얼에서는 JavaScript의 Promise의 기본 사항을 다뤘습니다. 저는 기사 마지막 부분에서 promise를 사용하면 코드를 비동기적으로 실행할 수 있다고 말했습니다.

이 튜토리얼에서는 Promise를 효과적으로 사용하고 더욱 깔끔한 비동기 코드를 작성할 수 있게 해주는 JavaScript의 async 和 await 키워드에 대해 알아봅니다.

정의 async함수

비동기 함수부터 시작해 보겠습니다. 다음 인사말 기능을 고려해 보세요.

이것은 이전에 본 일반적인 JavaScript 함수입니다. 이 함수가 하는 일은 "Hello, World!"라는 문자열을 반환하는 것뿐입니다. 하지만 다음과 같이 앞에 async를 추가하면 이를 비동기 함수로 바꿀 수 있습니다. 으아아아

Hello, World!Promise로 설정된 객체를 반환합니다. 즉, Promise가 성공적으로 해결되었습니다.

키워드를 사용하면 반환 값이 구문 분석된 async 关键字意味着返回值将包装在已解析的 Promise 对象中。已解决的 Promise 的值将与我们从 async 개체로 래핑됩니다. 해결된 Promise의 값은

async다음과 같이

으아아아 async기본적으로

await

async 函数都可以包含零个或多个 await 表达式。重要的是要记住 await 关键字仅在 async 函数内有效。 await 关键字用于等待 Promise모든

표현식이 포함될 수 있습니다. await 키워드는

키워드는 Promise，这种情况下直接使用，原生等待。在这种情况下，不会有对 then() 的隐式调用。表达式可以是 thenable 对象，在这种情况下，将通过调用 then() 方法构造一个新的 Promise 。该表达式也可以是不可thenable 的值。在这种情况下，将构建一个已经实现的 Promise이 해결되거나 거부될 때까지 기다린 다음 완료된 값을 얻는 데 사용됩니다.

async 키워드를 사용하며 구문은 다음과 같습니다.

표현은 네이티브일 수 있습니다async 函数中使用 await 이 경우에는 직접 사용하고 네이티브 대기를 사용합니다. 이 경우 then()에 대한 암시적 호출이 없습니다. 표현식은 thenable 객체일 수 있으며, 이 경우 then() 메서드를 호출하여 새로운

이 우리가 사용할 수 있도록 빌드됩니다. await 关键字与 async

함수 실행은 다음 틱까지 일시 중지됩니다. 이것을 기억하는 것이 중요합니다.

다음은

키워드를 사용하는 예입니다.

다음은 Promise를 명시적으로 사용할 때 n_greet() 是一个返回字符串作为输出的普通函数。我们的第二个函数是 async 函数，它在 await 함수와 함께

으아아아

n_greet()문 실행 순서 이해하기

이제 두 가지 인사말 함수를 작성하고 결과가 출력되는 순서를 살펴보겠습니다. a_greet() 으아아아

는 문자열을 출력으로 반환하는 일반 함수입니다. 두 번째 함수는 async 函数，其中包含多个语句。这些语句之一将具有 await 关键字。您将看到，在 async 函数中使用 await 关键字会暂停执行 await 키워드 뒤에 표현식을 사용하는

async 函数包含一个显式定义的 Promise，前面带有 await 关键字。这意味着 await다음은 이러한 모든 함수를 호출하고 출력을 기록하는 코드 조각입니다. 으아아아 안녕하세요, Adam 님,

async

console.log("Before Greeting Function...");
aa_greet("Monty").then((msg) => console.log(msg));
console.log("After Greeting Function...");

/* Output in Order
23:42:15.327 Before Greeting Function...
23:42:15.331 Before Await...
23:42:15.331 After Greeting Function...
23:42:17.333 After Await...
23:42:17.333 Hello, Monty! */

首先记录字符串“Before Greeting Function...”，因为这是我们进行的第一次调用。之后，我们调用 aa_greet() 函数。这会导致输出字符串“Before Await...”。然后，浏览器遇到 await 关键字。所以它等待承诺解决。与此同时，aa_greet()函数之外的代码继续执行。这就是为什么我们在下一个日志条目中得到“After Greeting Function...”字符串作为输出。

一旦承诺得到解决，浏览器就会继续执行，我们会得到“After Await...”作为输出。最后，我们解析的问候语作为承诺返回，因为我们使用 async 函数。我们对这个已解决的 Promise 调用 then() 方法并记录“Hello, Monty!”到控制台。

通过 Fetch API 使用 async 和 await

await 关键字的一个常见用例是从远程 API 获取数据。这允许比嵌套回调或承诺链更干净的代码。

async function getData() {
    // use the fetch API to fetch data from an API endpoint
    const response = await fetch('https://jsonplaceholder.typicode.com/todos/1');
    
    // check if the response is okay (HTTP status code 200-299)
    if (!response.ok) {
      throw new Error(`HTTP error! Status: ${response.status}`);
    }
    
    // parse the response as JSON
    const data = await response.json();
    
    return data;
}

在此函数中，首先我们等待对 API 查询的初始响应。如果响应正常，我们就会等待 JSON 格式的完整响应数据。我们返回 JSON 数据，但请记住，由于这是一个异步函数，因此我们实际上返回一个最终解析为该数据的 Promise。因此，如果您想访问结果数据，您必须再次使用类似await关键字的东西！

const data = await getData();

最终想法

在上一篇教程中了解了 Promise 对象后，我们在本教程中讨论了 async 函数和 await 关键字。您现在应该能够编写自己的 async 函数，使用 await 关键字来使用更清晰、更易读的代码实现基于 Promise 的行为。

위 내용은 비동기의 힘을 살펴보고 JavaScript에서 기다리세요의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!