JavaScript asynchronous call example analysis

This article mainly walks into the issue of JavaScript asynchronous calls step by step through a small question. The answer process is attached to this article. Interested friends can take a look at it. I hope it can help everyone better master JavaScript asynchronous calls.

Problem

You can modify the aa() function below, the purpose is to use console.log() to output the want-value after copying it

function aa() {
  setTimeout(function() {
    return "want-value";
  }, 1000);
}

However, there are additional requirements:

aa() function can be modified at will, but there cannot be console.log()

Execute console.log() There cannot be a setTimeout package in the statement

Answer

Maybe this is an interview question, whatever. The main purpose of the question is to examine the processing of asynchronous call execution results. Since it is an asynchronous call, it is impossible to wait for the asynchronous result synchronously. The result must be asynchronous.

setTimeout() is often used to simulate asynchronous operations. At first, asynchronous was used to notify (call) the handler of the processing results through callbacks

function aa(callback) {
  setTimeout(function() {
    if (typeof callback === "function") {
      callback("want-value");
    }
  }, 1000);
}
aa(function(v) {
  console.log(v);
});

However, when callbacks are used in larger asynchronous applications, multi-layer embedding is prone to occur. set, so later some proposals were made to "flatten" it. For this part, you can refer to the "flattening" of chat asynchronous calls. Of course Promise is a very popular method and was eventually adopted by ES6. Use Promise to implement it as follows:

function aa() {
  return new Promise(resolve => {
    setTimeout(function() {
      resolve("want-value");
    }, 1000);
  });
}
aa().then(v => console.log(v));

As far as this example is concerned, it is similar to the previous callback example. However, it will lead to a more recommended method currently - async/await, which is supported starting from ES2017:

function aa() {
  return new Promise(resolve => {
    setTimeout(function() {
      resolve("want-value");
    }, 1000);
  });
}
async function main() {
  const v = await aa();
  console.log(v);
}
main();

aa() The definition is the same as the definition in the Promise method The same, but when calling, use await, asynchronous waiting, wait for the asynchronous result, and then use console.log() to process it.

It should be noted here that await can only be used in async methods, so in order to use await you must define an async main method and call it in the global scope. Since the main method is asynchronous (declared as async), if there are other statements after the main() call, such as console.log("hello"), then this statement will be executed first.

async/await syntax makes writing asynchronous calls like writing synchronous code. When writing code, you can avoid logical jumps and write it more easily. (Reference: From hell to heaven, Node callback changes to async/await)

Of course, defining main() and then calling main() can be encapsulated with IIFE,

(async () => {
  const v = await aa();
  console.log(v);
})();

Related recommendations:

php method to implement asynchronous calling of multi-threads

About JavaScript asynchronous calling method

PHP asynchronous call implementation method

The above is the detailed content of JavaScript asynchronous call example analysis. For more information, please follow other related articles on the PHP Chinese website!