Detailed explanation of obtaining the return value instance of JavaScript asynchronous function

This article will share with you how to solve the problem of obtaining the return value of JavaScriptAsynchronousFunction and the final solution. Friends who need it can refer to it

Study a small question today: How to get the return value of the JavaScript asynchronous function?

1. Wrong attempt

My initial attempt when I didn’t enter the industry:

<script>
function getSomething() {
 var r = 0;
 setTimeout(function() {
 r = 2;
 }, 10);
 return r;
}

function compute() {
 var x = getSomething();
 alert(x * 2);
}
compute();
</script>

2.Callback function

What popped up was not 4, but 0. Later I found out that this was an asynchronous problem.

We need to use callback technology to do it:

<script>
function getSomething(cb) {
 var r = 0;
 setTimeout(function() {
 r = 2;
 cb(r);
 }, 10);
}

function compute(x) {
 alert(x * 2);
}
getSomething(compute);
</script>

3.promise

The callback function is really a good thing, and I have been writing code like this for a long time. Pass the function when encountering asynchrony! ! Later, I learned that there is a thing called promise, which specifically solves problems caused by callback functions, and learned about promise:

<script>
function getSomething() {
 var r = 0;
 return new Promise(function(resolve) {
 setTimeout(function() {
  r = 2;
  resolve(r);
 }, 10);
 });
}

function compute(x) {
 alert(x * 2);
}
getSomething().then(compute);
</script>

The promise still did not give up the callback, but the position of the callback changed.

4.generator

Later I learned about generator and knew that it has the ability to interrupt function execution, so I made a new attempt:

<script>
function getSomething() {
 var r = 0;
 setTimeout(function() {
 r = 2;
 it.next(r);
 }, 10);
}

function *compute(it) {
 var x = yield getSomething();
 alert(x * 2);
}
var it = compute();
it.next();
</script>

Synchronous writing method can realize asynchronous logic, which feels much more advanced.

5.promise + generator

Later I heard that promise plus generator is the perfect way to asynchronously use anti-aircraft guns to kill mosquitoes (this example is not enough Tell me the benefits of using the two together):

<script>
function getSomething() {
 var r = 0;
 return new Promise(function(resolve) {
 setTimeout(function() {
  r = 2;
  resolve(r);
 }, 10);
 });
}

function *compute() {
 var x = yield getSomething();
 alert(x * 2);
}
var it = compute();
it.next().value.then(function(value) {
 it.next(value);
});
</script>

6.async

#I thought this was cool enough, but later I heard that es7 provided The ultimate solution: async.

As a young man who loves to learn, he thinks that he cannot be left behind:

<script>
function getSomething() {
 var r = 0;
 return new Promise(function(resolve) {
 setTimeout(function() {
  r = 2;
  resolve(r);
 }, 10);
 });
}

async function compute() {
 var x = await getSomething();
 alert(x * 2);
}
compute();
</script>

The above is the detailed content of Detailed explanation of obtaining the return value instance of JavaScript asynchronous function. For more information, please follow other related articles on the PHP Chinese website!