获取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温习篇 强大的JQuery选择器
Apr 24 Javascript
Jquery实现仿腾讯娱乐频道焦点图(幻灯片)特效
Mar 06 Javascript
基于javascript实现tab选项卡切换特效调试笔记
Mar 30 Javascript
关于微信中a链接无法跳转问题
Aug 02 Javascript
微信小程序 UI与容器组件总结
Feb 21 Javascript
EL表达式截取字符串的函数说明
Sep 22 Javascript
利用js给datalist或select动态添加option选项的方法
Jan 25 Javascript
react中使用swiper的具体方法
May 15 Javascript
webpack4之SplitChunksPlugin使用指南
Jun 12 Javascript
详解Nuxt.js中使用Element-UI填坑
Sep 06 Javascript
微信小程序 wx.getUserInfo引导用户授权问题实例分析
Mar 09 Javascript
一起来了解一下JavaScript的预编译(小结)
Mar 01 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 冒泡排序 二分查找 顺序查找 二维数组排序算法函数的详解
2013/06/25 PHP
yii上传文件或图片实例
2014/04/01 PHP
PHP 二维关联数组根据其中一个字段排序(推荐)
2017/04/04 PHP
关于延迟加载JavaScript
2015/05/05 Javascript
Jquery插件easyUi实现表单验证示例
2015/12/15 Javascript
js确认框confirm()用法实例详解
2016/01/07 Javascript
Bootstrap基本组件学习笔记之导航(10)
2016/12/07 Javascript
为JQuery EasyUI 表单组件增加焦点切换功能的方法
2017/04/13 jQuery
微信小程序实战之自定义抽屉菜单(7)
2017/04/18 Javascript
JS+HTML5实现获取手机验证码倒计时按钮
2018/08/08 Javascript
详解如何探测小程序返回到webview页面
2019/05/14 Javascript
echarts多条折线图动态分层的实现方法
2019/05/24 Javascript
微信小程序图片左右摆动效果详解
2019/07/13 Javascript
详解Element-UI中上传的文件前端处理
2019/08/07 Javascript
python实现超简单端口转发的方法
2015/03/13 Python
Python的Django框架中if标签的相关使用
2015/07/15 Python
获取python的list中含有重复值的index方法
2018/06/27 Python
Python wxPython库使用wx.ListBox创建列表框示例
2018/09/03 Python
对python打乱数据集中X,y标签对的方法详解
2018/12/14 Python
Python中常用的内置方法
2019/01/28 Python
Python面向对象之类的封装操作示例
2019/06/08 Python
Python爬取爱奇艺电影信息代码实例
2019/11/26 Python
解决pycharm不能自动补全第三方库的函数和属性问题
2020/03/12 Python
Django Form设置文本框为readonly操作
2020/07/03 Python
python中numpy.empty()函数实例讲解
2021/02/05 Python
Ellesse英国官网:意大利高级运动品牌
2019/07/23 全球购物
电大自我鉴定
2013/10/27 职场文书
《蚂蚁和蝈蝈》教学反思
2014/02/24 职场文书
产品包装策划方案
2014/05/18 职场文书
汽车检测与维修专业求职信
2014/07/04 职场文书
历史博物馆观后感
2015/06/05 职场文书
办公室主任岗位竞聘书
2015/09/15 职场文书
nginx前后端同域名配置的方法实现
2021/03/31 Servers
MySQL大小写敏感的注意事项
2021/05/24 MySQL
python使用matplotlib绘制图片时x轴的刻度处理
2021/08/30 Python
Java 多态分析
2022/04/26 Java/Android