获取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 - 如何引入js代码
Mar 09 Javascript
JQuery 插件模板 制作jquery插件的朋友可以参考下
Mar 17 Javascript
Jquery练习之表单验证实现代码
Dec 14 Javascript
jQuery.prototype.init选择器构造函数源码思路分析
Feb 05 Javascript
jquery 追加tr和删除tr示例代码
Sep 12 Javascript
鼠标移到div,浮层显示明细,弹出层与div的上边距左边距重合(示例代码)
Dec 14 Javascript
JS冒泡事件的快速解决方法
Dec 16 Javascript
JavaScript修改css样式style动态改变元素样式
Dec 16 Javascript
在css加载完毕后自动判断页面是否加入css或js文件
Sep 10 Javascript
基于$.ajax()方法从服务器获取json数据的几种方式总结
Jan 31 Javascript
react 路由Link配置详解
Nov 11 Javascript
JavaScript声明变量和数据类型的转换
Apr 12 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
使ecshop模板中可引用常量的实现方法
2011/06/02 PHP
PHP定时更新程序设计思路分享
2014/06/10 PHP
php微信公众平台开发(一) 配置接口
2016/12/06 PHP
JavaScript中继承的一些示例方法与属性参考
2010/08/07 Javascript
node.js中的http.response.setHeader方法使用说明
2014/12/14 Javascript
页面get请求 中文参数方法乱码问题的快速解决方法
2016/05/31 Javascript
js倒计时简单实现代码
2016/08/11 Javascript
Node.js Sequelize如何实现数据库的读写分离
2016/10/23 Javascript
jQuery 的 ready()的纯js替代方法
2016/11/20 Javascript
详谈js中window.location.search的用法和作用
2017/02/13 Javascript
js实现导航吸顶效果
2017/02/24 Javascript
js canvas实现擦除效果示例代码
2017/04/26 Javascript
深入理解Vue-cli搭建项目后的目录结构探秘
2017/07/13 Javascript
vue-cli创建的项目中的gitHooks原理解析
2020/02/14 Javascript
JavaScrip如果基于url实现图片下载
2020/07/03 Javascript
JavaScript实现五子棋小游戏
2020/10/26 Javascript
js实现弹幕墙效果
2020/12/10 Javascript
python单线程实现多个定时器示例
2014/03/30 Python
简单了解Django模板的使用
2017/12/20 Python
为什么入门大数据选择Python而不是Java?
2018/03/07 Python
对python 合并 累加两个dict的实例详解
2019/01/21 Python
django框架CSRF防护原理与用法分析
2019/07/22 Python
详解通过HTML5 Canvas实现图片的平移及旋转变化的方法
2016/03/22 HTML / CSS
阿根廷首家户外用品制造商和经销商:Montagne
2018/02/12 全球购物
英国最大的婴儿监视器网上商店:Baby Monitors Direct
2018/04/24 全球购物
世界领先的26岁以下学生和青少年旅行预订网站:StudentUniverse
2018/07/01 全球购物
我的applet原先好好的, 一放到web server就会有问题,为什么?
2016/05/10 面试题
第一范式(1NF)、第二范式(2NF)和第三范式(3NF)之间的区别是什么?
2016/04/28 面试题
探矿工程师自荐信
2014/01/24 职场文书
《第一朵杏花》教学反思
2014/04/16 职场文书
2014年银行客户经理工作总结
2014/11/12 职场文书
先进工作者个人总结
2015/02/15 职场文书
幼儿园教师教育随笔
2015/08/14 职场文书
解决Go gorm踩过的坑
2021/04/30 Golang
Opencv实现二维直方图的计算及绘制
2021/07/21 Python