Sharing better solutions for JavaScript asynchronous experience

This article mainly tells you about better solutions for JavaScript experience asynchronousness. Friends who need this aspect can follow it for reference. I hope it can help everyone.

1. The evolution history of asynchronous solutions
JavaScript’s asynchronous operation has always been a troublesome problem, so people continue to propose various solutions to it. It can be traced back to the earliest callback function (an old friend of ajax), to Promise (not a new friend), and then to the ES6 Generator (a powerful friend).
We may have used a relatively famous Async.js a few years ago, but it did not get rid of the callback function, and error handling also followed the convention of "the first parameter of the callback function is used to pass the error". The well-known callback hell was still a prominent problem until Generator changed this asynchronous style.
But with the emergence of ES7's async await (Bunker's new friend), we can easily write synchronous style code while having an asynchronous mechanism. It can be said to be the simplest, most elegant, and best solution at present.

2. async await syntax
async await syntax is relatively simple and can be considered as syntactic sugar for Generator. It is more semantic than asterisk and yield. The following is a simple example that outputs hello world after 1 second:

function timeout(ms) {
 return new Promise((resolve) => {
  setTimeout(resolve, ms);
 });
}
async function asyncPrint(value, ms) {
 await timeout(ms);
 console.log(value)
}
asyncPrint('hello world', 1000);

await can only be used in async functions. If used in ordinary functions, an error will be reported

await is followed by a Promise object (of course other values ​​​​are also possible, but it will be packaged into a Promise that resolves immediately, which is meaningless)

await will wait for Promise Return the result and continue execution

Although what await is waiting for is a Promise object, you don't need to write .then(). You can get the return value directly. After fine-tuning the above code, you find that the return value result can also output hello. world:

function timeout(ms) {
 return new Promise((resolve) => {
  setTimeout(_ => {resolve('hello world')}, ms);
 });
}
async function asyncPrint(ms) {
 let result = await timeout(ms);
 console.log(result)
}
asyncPrint(1000);

3. async await error handling

As mentioned earlier, although await is waiting for a Promise object, there is no need to write .then( ), so there is no need to write .catch(). You can catch errors directly with try catch. This can avoid redundant and cumbersome error handling code. Let’s fine-tune the above example:

function timeout(ms) {
 return new Promise((resolve, reject) => {
  setTimeout(_ => {reject('error')}, ms);//reject模拟出错，返回error
 });
}
async function asyncPrint(ms) {
 try {
   console.log('start');
   await timeout(ms);//这里返回了错误
   console.log('end');//所以这句代码不会被执行了
 } catch(err) {
   console.log(err); //这里捕捉到错误error
 }
}
asyncPrint(1000);

If there are multiple awaits, they can be placed together in try catch:

async function main() {
 try {
  const async1 = await firstAsync();
  const async2 = await secondAsync();
  const async3 = await thirdAsync();
 }
 catch (err) {
  console.error(err);
 }
}

4. Notes on async await

1). As mentioned before, the Promise object behind the await command is likely to result in rejection or a logical error, so it is best to put await in the try catch code block.

2). For asynchronous operations of multiple await commands, if there is no dependency, let them trigger at the same time.

const async1 = await firstAsync();
const async2 = await secondAsync();

In the above code, if async1 and async2 are two independent asynchronous operations, writing this way will be more time-consuming, because secondAsync will only be executed after firstAsync is completed. It can be handled elegantly with Promise.all:

let [async1, async2] = await Promise.all([firstAsync(), secondAsync()]);

3). await can only be used in async functions. If used in ordinary functions, an error will be reported:

async function main() {
 let docs = [{}, {}, {}];
 //报错 await is only valid in async function
 docs.forEach(function (doc) {
  await post(doc);
  console.log('main');
 });
}
function post(){
 return new Promise((resolve) => {
  setTimeout(resolve, 1000);
 });
}

Just add async to the forEach internal method:

async function main() {
 let docs = [{}, {}, {}];
 docs.forEach(async function (doc) {
  await post(doc);
  console.log('main');
 });
}
function post(){
 return new Promise((resolve) => {
  setTimeout(resolve, 1000);
 });
}

But you will find that the three mains are at the same time Output, this means that post is executed concurrently, not sequentially. Changing to for can solve the problem. The three mains are output 1 second apart:

async function main() {
 let docs = [{}, {}, {}];
 for (let doc of docs) {
  await post(doc);
  console.log('main');
 }
}
function post(){
 return new Promise((resolve) => {
  setTimeout(resolve, 1000);
 });
}

In short, after using async await, I feel refreshed. I can use very concise and elegant code to implement various fancy asynchronous operations, and I don’t have to fall into callback hell when the business logic is complex. I dare not say that this must be the ultimate solution, but it is indeed the most elegant solution currently!

Related recommendations:

What is JavaScript asynchronous

Introduction to 4 methods of Javascript asynchronous programming

Detailed explanation of javascript asynchronous execution and operation flow control examples

The above is the detailed content of Sharing better solutions for JavaScript asynchronous experience. For more information, please follow other related articles on the PHP Chinese website!