获取JavaScript异步函数的返回值


Posted in Javascript onDecember 21, 2016

今天研究一个小问题: 怎么拿到JavaScript异步函数的返回值?

1.错误尝试

当年未入行时,我的最初尝试:

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

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

2.回调函数

弹出的不是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>

3.promise

回调函数真是个好东西,然后一直这么写代码写了很久。遇到异步就传函数!!后来我知道有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仍然没有放弃回调,只是回调的位置发生了改变。

4.generator

再后来我又学会了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>

同步的写法,能实现异步的逻辑,感觉高大上了很多。

5.promise + generator

后来又听说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>

6.async

心想这算是够?诺陌桑?罄从痔??s7给出了终极方案: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>

到这里终于长出了一口气。

后记:

上面所有的例子,在最新chrome上都可以运行。一个个小例子,点了点几个名词。

当然也只是“点”而已,如果能提供读者深入学习相关知识点的一个trigger,那么老姚就心满意足了。

以上就是老姚童鞋给我们分享的全部内容了,希望对大家理解JavaScript异步函数能够有所帮助

Javascript 相关文章推荐
Javascript MD4
Dec 20 Javascript
JavaScript While 循环基础教程
Apr 05 Javascript
详谈 Jquery Ajax异步处理Json数据.
Sep 09 Javascript
js的image onload事件使用遇到的问题
Jul 15 Javascript
js实现卡片式项目管理界面UI设计效果
Dec 08 Javascript
分享十三个最佳JavaScript数据网格库
Apr 07 Javascript
Vue+jquery实现表格指定列的文字收缩的示例代码
Jan 09 jQuery
JavaScript中常见内置函数用法示例
May 14 Javascript
vue使用codemirror的两种用法
Aug 27 Javascript
js、jquery实现列表模糊搜索功能过程解析
Mar 27 jQuery
JS前端基于canvas给图片添加水印
Nov 11 Javascript
vue实现登录功能
Dec 31 Vue.js
bootstrap实现图片自动轮播
Dec 21 #Javascript
详解JavaScript时间处理之几个月前或几个月后的指定日期
Dec 21 #Javascript
详解前端自动化工具gulp自动添加版本号
Dec 20 #Javascript
详解Vue.js动态绑定class
Dec 20 #Javascript
浅谈Angular的$q, defer, promise
Dec 20 #Javascript
BootStrapTable服务器分页实例解析
Dec 20 #Javascript
bootstrap实现每隔5秒自动轮播效果
Dec 20 #Javascript
You might like
2019年漫画销量排行榜:鬼灭登顶 海贼单卷制霸 尾田盛赞鬼灭
2020/03/08 日漫
全国FM电台频率大全 - 1 北京市
2020/03/11 无线电
PHP新手上路(九)
2006/10/09 PHP
php面向对象全攻略 (八)重载新的方法
2009/09/30 PHP
FirePHP 推荐一款PHP调试工具
2011/04/23 PHP
PHP爆绝对路径方法收集整理
2012/09/17 PHP
解决php表单重复提交实现方法
2015/09/29 PHP
PHP表单数据写入MySQL数据库的代码
2016/05/31 PHP
thinkphp5引入公共部分header、footer的方法详解
2018/09/14 PHP
Google Maps API地图应用示例分享
2014/10/23 Javascript
FF(火狐)浏览器无法执行window.close()解决方案
2014/11/13 Javascript
JavaScript控制两个列表框listbox左右交换数据的方法
2015/03/18 Javascript
js实现简单排列组合的方法
2016/01/27 Javascript
JavaScript实现数据类型的相互转换
2016/03/06 Javascript
javascript基本常用排序算法解析
2017/09/27 Javascript
浅析java线程中断的办法
2018/07/29 Javascript
使用python检测手机QQ在线状态的脚本代码
2013/02/10 Python
python中Flask框架简单入门实例
2015/03/21 Python
Python二叉搜索树与双向链表转换实现方法
2016/04/29 Python
简述:我为什么选择Python而不是Matlab和R语言
2017/11/14 Python
pandas 将list切分后存入DataFrame中的实例
2018/07/03 Python
解决python xlrd无法读取excel文件的问题
2018/12/25 Python
在python中利用最小二乘拟合二次抛物线函数的方法
2018/12/29 Python
python实现自动解数独小程序
2019/01/21 Python
python读写配置文件操作示例
2019/07/03 Python
详解pandas DataFrame的查询方法(loc,iloc,at,iat,ix的用法和区别)
2019/08/02 Python
Python实现给PDF添加水印的方法
2021/01/25 Python
国际旅客访问北美最大的汽车租赁提供商:Alamo Rent A Car
2018/06/13 全球购物
英国最大的在线床超市:Bed Star
2019/01/24 全球购物
财务管理专业毕业生求职信范文
2013/09/21 职场文书
论群众路线学习笔记
2014/11/06 职场文书
骨干教师事迹材料
2014/12/17 职场文书
pycharm部署django项目到云服务器的详细流程
2021/06/29 Python
opencv检测动态物体的实现
2021/07/21 Python
MySQL的全局锁和表级锁的具体使用
2021/08/23 MySQL
python pandas 解析(读取、写入)CSV 文件的操作方法
2022/12/24 Python