Is there a better solution than async using JavaScript?

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

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 an immediately resolved Promise, which is meaningless)

await will wait for the result of the Promise to return before continuing execution

await is waiting. It is a Promise object, but 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 in fact there is no need to write .catch(). You can catch errors directly with try catch, which can avoid very redundant error handling code. Yu He is cumbersome, so 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 put 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. Async await points to note

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, which 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 output at the same time, which means that the post is executed concurrently, not sequentially. Changing to for can solve the problem. The three mains are output one 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. middle. I dare not say that this must be the ultimate solution, but it is indeed the most elegant solution currently!

The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.

Related articles:

How to integrate zTree code in Angular

node packaging tool Pkg (detailed tutorial)

How to use js to invoke App in WeChat?

The above is the detailed content of Is there a better solution than async using JavaScript?. For more information, please follow other related articles on the PHP Chinese website!