获取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 pagination插件实现无刷新分页代码
Oct 13 Javascript
js 全兼容可高亮二级缓冲折叠菜单
Jun 04 Javascript
javascript innerHTML使用分析
Dec 03 Javascript
微信小程序 动态的设置图片的高度和宽度详解及实例代码
Feb 24 Javascript
详解在 Angular 项目中添加 clean-blog 模板
Jul 04 Javascript
JS非空验证及邮箱验证的实例
Aug 11 Javascript
vue实现类似淘宝商品评价页面星级评价及上传多张图片功能
Oct 29 Javascript
深入理解vue中的slot与slot-scope
Apr 22 Javascript
在Vue项目中用fullcalendar制作日程表的示例代码
Aug 04 Javascript
JS中的算法与数据结构之队列(Queue)实例详解
Aug 20 Javascript
Javascript模拟实现new原理解析
Mar 03 Javascript
element tree树形组件回显数据问题解决
Aug 14 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
dhtmlxTree目录树增加右键菜单以及拖拽排序的实现方法
2013/04/26 PHP
探讨php中header的用法详解
2013/06/07 PHP
Yii框架参数配置文件params用法实例分析
2019/09/11 PHP
浅谈laravel-admin的sortable和orderby使用问题
2019/10/03 PHP
两种简单实现菜单高亮显示的JS类代码
2010/06/27 Javascript
JS连接SQL数据库与ACCESS数据库的方法实例
2013/11/21 Javascript
自己动手实现jQuery Callbacks完整功能代码详解
2013/11/25 Javascript
js实现单击图片放大图片的方法
2015/02/17 Javascript
JavaScript数组方法总结分析
2016/05/06 Javascript
JS实现的简单轮播图运动效果示例
2016/12/22 Javascript
jquery实现轮播图效果
2017/02/13 Javascript
Node.js如何响应Ajax的POST请求并且保存为JSON文件详解
2017/03/10 Javascript
js图片放大镜效果实现方法详解
2020/10/28 Javascript
jQuery自定义元素右键点击事件(实现案例)
2017/04/28 jQuery
Vuejs实现带样式的单文件组件新方法
2017/05/02 Javascript
layui问题之模拟select点击事件的实例讲解
2018/08/15 Javascript
webpack4 处理CSS的方法示例
2018/09/03 Javascript
jQuery中each遍历的三种方法实例分析
2018/09/07 jQuery
webpack结合express实现自动刷新的方法
2019/05/07 Javascript
python matplotlib画图实例代码分享
2017/12/27 Python
浅谈tensorflow1.0 池化层(pooling)和全连接层(dense)
2018/04/27 Python
查看python下OpenCV版本的方法
2018/08/03 Python
创建Django项目图文实例详解
2019/06/06 Python
如何解决cmd运行python提示不是内部命令
2020/07/01 Python
python 对一幅灰度图像进行直方图均衡化
2020/10/27 Python
使用python画出逻辑斯蒂映射(logistic map)中的分叉图案例
2020/12/11 Python
美国性感内衣店:Yandy
2018/06/12 全球购物
物业管理求职自荐信
2013/09/25 职场文书
社区八一活动方案
2014/02/03 职场文书
大二法英学生职业生涯规划范文
2014/02/27 职场文书
Vue项目中如何封装axios(统一管理http请求)
2021/05/02 Vue.js
php+laravel 扫码二维码签到功能
2021/05/15 PHP
MySQL数据库超时设置配置的方法实例
2021/10/15 MySQL
Java8中接口的新特性使用指南
2021/11/01 Java/Android
python脚本框架webpy模板控制结构
2021/11/20 Python
Python四款GUI图形界面库介绍
2022/06/05 Python