当前位置：首页 > 资讯 > 技术文档

获取JavaScript异步函数的返回值

时间：2021-04-10 17:40 编辑：来源：阅读：
扫一扫，手机访问

摘要：获取JavaScript异步函数的返回值

今天研究一个小问题：怎么拿到JavaScript异步函数的返回值？ [b]1.错误尝试[/b] 当年未入行时，我的最初尝试：

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

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

[b]2.回调函数[/b] 弹出的不是4，而是0，后来知道这是异步的问题，要用回调技术来做：

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

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

[b]3.promise[/b] 回调函数真是个好东西，然后一直这么写代码写了很久。遇到异步就传函数！！后来我知道有promise这一个东西，专门解决由于回调函数引起的问题，又学会了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仍然没有放弃回调，只是回调的位置发生了改变。 [b]4.generator[/b] 再后来我又学会了generator，知道其有中断函数执行的能力，又做了新的尝试：

<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>

同步的写法，能实现异步的逻辑，感觉高大上了很多。 [b]5.promise + generator[/b] 后来又听说promise加generator，才是异步的完美方式，赶紧用高射炮打蚊子（这个例子，还不足以说出二者在一起用的好处）：

<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>

[b]6.async[/b] 心想这算是够屌的吧，后来又听说es7给出了终极方案:async。作为爱学习的少年，心想自己不能被落下：

<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>

到这里终于长出了一口气。 [b]后记：[/b] 上面所有的例子，在最新chrome上都可以运行。一个个小例子，点了点几个名词。当然也只是“点”而已，如果能提供读者深入学习相关知识点的一个trigger，那么老姚就心满意足了。以上就是老姚童鞋给我们分享的全部内容了，希望对大家理解JavaScript异步函数能够有所帮助

全部评论(0)

上一篇：JavaScript实现复制或剪切内容到剪贴板功能的方法
下一篇：Javascript this 的一些学习总结

资讯排行榜
更多>>