How to get the return value of JavaScript asynchronous function

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

1. Wrong attempts

When I didn’t enter the industry, my first attempt was:

<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 pops up is not 4, but 0. Later I found out that this is 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 asynchronous! ! Later, I learned that there is a thing called promise, which specifically solves problems caused by callback functions. I also 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>

promise still does not give up the callback, it just happens at the location where the callback occurs. 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>

The 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 think this is cool enough. , and later I heard that es7 gave the ultimate solution: async.

As a young man who loves to learn, I thought that I could not 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>

I finally breathed a sigh of relief here.

Postscript:

All the above examples can be run on the latest chrome.

The above is the detailed content of How to get the return value of JavaScript asynchronous function. For more information, please follow other related articles on the PHP Chinese website!