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

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

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

정의 async함수

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

으아아아

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

이번 함수는 상태 속성이 Completed로 설정되고 값이

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

함수 정의에서는 여전히 "Hello, World!" 문자열을 반환합니다. 그러나

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

함수에서 반환된 값과 동일합니다.

async다음과 같이

함수에서 자신만의 약속을 반환할 수도 있습니다.

으아아아 async기본적으로

키워드는 항상 약속을 반환하는 함수를 정의하는 데 도움이 됩니다. 명시적으로 Promise를 직접 반환하거나 함수가 Promise가 아닌 반환 값을 Promise로 래핑하도록 할 수 있습니다.

await

키워드

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

함수에는 0개 이상의

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

함수 내에서만 유효하다는 점을 기억하는 것이 중요합니다.

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

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

으아아아

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

이 생성됩니다. 표현식은 then이 불가능한 값일 수도 있습니다. 이 경우 이미 구현된

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

약속이 이행되었다고 가정해 보세요.

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

다음은

함수에서

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

으아아아

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

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

으아아아

이번에는 2초 안에 해결되는 Promise를 명시적으로 사용합니다. 따라서 "Hello, World" 인사말은 2초 후에 인쇄됩니다.

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

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

첫 번째 함수

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

함수입니다. 이 경우 반환 값은 이행된 약속입니다.

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

함수 호출이 종료되었습니다. 그러나 그는 처음으로 출력에서 ​​환영을 받았습니다. 이는 함수 호출이 문자열을 직접 반환하기 때문입니다.

async

처음에 Andrew에게 인사하는 함수 호출은 이행된 약속의 빌드로 이어집니다. 그러나 실행은 다음 클록 주기까지 일시 중지된 상태로 유지됩니다. 그렇기 때문에 아담에게 보내는 인사말 뒤에 출력 인사말이 나타나는 것입니다. 🎜 🎜이제 여러 문을 포함하는 좀 더 복잡한 🎜 함수를 정의하겠습니다. 이러한 명령문 중 하나에는 🎜 키워드가 있습니다. 🎜 함수에서 🎜 키워드를 사용하면 🎜 문 다음에 오는 다른 문의 실행이 일시 중지되는 것을 볼 수 있습니다. 🎜 으아아아 🎜우리의 🎜 함수에는 🎜 키워드 앞에 명시적으로 정의된 Promise가 포함되어 있습니다. 즉, 🎜 키워드는 약속이 이행될 때까지 기다린 다음 이행된 값을 반환합니다. 약속이 실현되는 데 2초가 걸리므로 약 2초 후에 콘솔 로그에 "🎜After Await...🎜"가 표시됩니다. 🎜 🎜이것은 🎜 함수의 일부 명령문을 기록하는 코드 조각입니다. 🎜

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 중국어 웹사이트의 기타 관련 기사를 참조하세요!