获取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 相关文章推荐
JQuery小知识
Oct 15 Javascript
kmock javascript 单元测试代码
Feb 06 Javascript
JavaScript Math.ceil() 函数使用介绍
Dec 11 Javascript
javascript获取元素偏移量的方法有哪些
Jun 24 Javascript
JavaScript清空数组元素的两种方法简单比较
Jul 10 Javascript
基于jquery二维码生成插件qrcode
Jan 07 Javascript
Vue之Watcher源码解析(1)
Jul 19 Javascript
基于Vue2x实现响应式自适应轮播组件插件VueSliderShow功能
May 16 Javascript
vue使用v-if v-show页面闪烁,div闪现的解决方法
Oct 12 Javascript
swiper.js插件实现pc端文本上下滑动功能示例
Dec 03 Javascript
使用layui的router来进行传参的实现方法
Sep 06 Javascript
element-ui中dialog弹窗关闭按钮失效的解决
Sep 22 Javascript
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
php 结果集的分页实现代码
2009/03/10 PHP
php数组函数序列之prev() - 移动数组内部指针到上一个元素的位置,并返回该元素值
2011/10/31 PHP
php计算税后工资的方法
2015/07/28 PHP
阿里云Win2016安装Apache和PHP环境图文教程
2018/03/11 PHP
laravel 去掉index.php伪静态的操作方法
2019/10/12 PHP
JS函数验证总结(方便js客户端输入验证)
2010/10/29 Javascript
js关闭当前页面(窗口)的几种方式总结
2013/03/05 Javascript
Javascript页面添加到收藏夹的简单方法
2013/08/07 Javascript
jQuery判断checkbox(复选框)是否被选中以及全选、反选实现代码
2014/02/21 Javascript
值得分享和收藏的Bootstrap学习教程
2016/05/12 Javascript
更靠谱的H5横竖屏检测方法(js代码)
2016/09/13 Javascript
10分钟掌握XML、JSON及其解析
2020/12/06 Javascript
js Canvas实现的日历时钟案例分享
2016/12/25 Javascript
AngularJS折叠菜单实现方法示例
2017/05/18 Javascript
浅谈React Native 中组件的生命周期
2017/09/08 Javascript
Express使用html模板的详细代码
2017/09/18 Javascript
JavaScript内存泄漏的处理方式
2017/11/20 Javascript
jquery.onoff实现简单的开关按钮功能(推荐)
2018/05/24 jQuery
Vue自定义toast组件的实例代码
2018/08/15 Javascript
Vue实现点击显示不同图片的效果
2019/08/10 Javascript
jQuery 常用特效实例小结【显示与隐藏、淡入淡出、滑动、动画等】
2020/05/19 jQuery
vue 内联样式style中的background用法说明
2020/08/05 Javascript
解决VantUI popup 弹窗不弹出或无蒙层的问题
2020/11/03 Javascript
[43:51]2018DOTA2亚洲邀请赛3月30日 小组赛B组 EG VS Secret
2018/03/31 DOTA
pyqt5简介及安装方法介绍
2018/01/31 Python
flask框架jinja2模板与模板继承实例分析
2019/08/01 Python
django自带调试服务器的使用详解
2019/08/29 Python
在django admin详情表单显示中添加自定义控件的实现
2020/03/11 Python
windows10 pycharm下安装pyltp库和加载模型实现语义角色标注的示例代码
2020/05/07 Python
HTML5 标准将把互联网视频扔回到黑暗时代
2010/02/10 HTML / CSS
Keds加拿大官网:购买帆布运动鞋和皮鞋
2019/09/26 全球购物
租房协议书范本
2014/04/09 职场文书
2015年百日安全活动总结
2015/03/26 职场文书
交通事故起诉书
2015/05/19 职场文书
推广普通话主题班会
2015/08/17 职场文书
JS实现九宫格拼图游戏
2022/06/28 Javascript