Home > Web Front-end > JS Tutorial > body text

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

怪我咯
Release: 2017-06-29 10:58:19
Original
1741 people have browsed it

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>
Copy after login

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>
Copy after login

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>
Copy after login

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>
Copy after login

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>
Copy after login

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>
Copy after login

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!

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn:Public welfare online PHP training,Help PHP learners grow quickly!