A Beginner's Guide to JavaScript async/await, with Examples

Master JavaScript asynchronous operations: Async/Await Detailed explanation

This article explores in-depth async/await in JavaScript, teaching you how to efficiently control asynchronous operations and write clearer and easier to read code.

Core points:

• async/await in JavaScript simplifies the processing of asynchronous operations, making the code look like it is executed synchronously, but is still non-blocking.
The
• async function returns a promise, and the await keyword pauses the function execution until the promise is resolved, thereby enhancing the readability of the code and flow control.
The error handling of
• async functions can be efficiently managed using try/catch block or Promise method. catch()
Use
• to optimize running asynchronous commands in parallel, allowing multiple Promise.all to be resolved simultaneously rather than executed sequentially. Promise
Async iterators and
• loops allow the correct processing of for...of functions in the loop, ensuring the correct order of execution and better performance management. async
The top layer introduced by ES2022 allows the use of
• at the top layer of the ES module, simplifying the integration of asynchronous code without the need for additional wrappers. await await

Summary of content:

How to create JavaScript asynchronous function

1. Keywords
   • async
   Keywords
   • await Different ways to declare asynchronous functions
   JavaScript
/
2. Underground use Promiseawait asyncSwitch from Promise to
   /
   • async await
   Error handling in asynchronous functions
3. The
   method using function call
   • catch()
Run asynchronous commands in parallel
Asynchronous in synchronous loop
5. await
Top Level
6. await
Writing asynchronous code confidently

In JavaScript, some operations are asynchronous. This means that the results or values ​​they produce will not be immediately available.

Consider the following code:

The

function fetchDataFromApi() {
  // 数据获取逻辑
  console.log(data);
}

fetchDataFromApi();
console.log('数据获取完成');

JavaScript interpreter does not wait for the asynchronous

function to complete before executing the next statement. Therefore, it will record the actual data returned by the API fetchDataFromApi. 数据获取完成

In many cases, this is not the expected behavior. Fortunately, we can use the

and async keywords to make our program wait for the asynchronous operation to complete before continuing to execute. await

This feature introduces JavaScript in ES2017 and is supported by all modern browsers.

How to create JavaScript asynchronous function

Let's take a closer look at the data acquisition logic in the

function. Data fetching in JavaScript is a primary example of asynchronous operations. fetchDataFromApi

Using the Fetch API, we can do this:

function fetchDataFromApi() {
  // 数据获取逻辑
  console.log(data);
}

fetchDataFromApi();
console.log('数据获取完成');

Here, we get a programming joke from JokeAPI. The response of the API is in JSON format, so after the request is completed (using the json() method) we extract the response and then log the joke to the console.

Please note that JokeAPI is a third-party API, so we cannot guarantee the quality of the jokes we return!

If we run this code in a browser or in Node (version 17.5 using the --experimental-fetch flag), we see that the console is still logging the content in the wrong order.

Let's change it.

asyncKeywords

The first thing we need to do is to mark the include function as an asynchronous function. We can do this using the async keyword, and we put it in front of the function keyword:

function fetchDataFromApi() {
  fetch('https://v2.jokeapi.dev/joke/Programming?type=single')
    .then(res => res.json())
    .then(json => console.log(json.joke));
}

fetchDataFromApi();
console.log('数据获取完成');

Async functions always return a promise (more on this later), so just link then() to the function call to get the correct execution order:

async function fetchDataFromApi() {
  fetch('https://v2.jokeapi.dev/joke/Programming?type=single')
    .then(res => res.json())
    .then(json => console.log(json.joke));
}

If we run the code now, we will see something like this:

fetchDataFromApi()
  .then(() => {
    console.log('数据获取完成');
  });

But we don't want to do this! JavaScript's Promise syntax can be a bit complicated, and that's where async/await flashes: it allows us to write asynchronous code using syntax that looks more like synchronous code, and is easier to read.

awaitKeywords

The next thing to do is to preface any asynchronous operations in the function with the await keyword. This will force the JavaScript interpreter to "pause" execution and wait for the result. We can assign the results of these operations to variables:

<code>程序员的浪漫：一行代码解决千行代码的bug。
数据获取完成</code>

We also need to wait for the result of calling the fetchDataFromApi function:

async function fetchDataFromApi() {
  const res = await fetch('https://v2.jokeapi.dev/joke/Programming?type=single');
  const json = await res.json();
  console.log(json.joke);
}

Unfortunately, if we try to run the code now, we will encounter an error:

await fetchDataFromApi();
console.log('数据获取完成');

This is because we cannot use async outside of await functions in non-module scripts. We'll cover this in more detail later, but now the easiest way to solve this problem is to wrap the call code with its own function, which we also mark as async:

<code>Uncaught SyntaxError: await is only valid in async functions, async generators and modules</code>

If we run the code now, everything should be output in the correct order:

async function fetchDataFromApi() {
  const res = await fetch('https://v2.jokeapi.dev/joke/Programming?type=single');
  const json = await res.json();
  console.log(json.joke);
}

async function init() {
  await fetchDataFromApi();
  console.log('数据获取完成');
}

init();

The fact that we need this extra boilerplate code is unfortunate, but in my opinion the code is still easier to read than the Promise-based version.

Different ways to declare asynchronous functions

The previous example uses two named function declarations (the function keyword followed by the function name), but we are not limited to this. We can also mark function expressions, arrow functions, and anonymous functions as async.

If you want to review the differences between function declarations and function expressions, check out our guide

(The following content is the same. Rewrite paragraph by paragraph according to the original text, maintain the original meaning, and adjust the language style to make it smoother and more natural)

The above is the detailed content of A Beginner's Guide to JavaScript async/await, with Examples. For more information, please follow other related articles on the PHP Chinese website!