获取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 相关文章推荐
基于PHP+Jquery制作的可编辑的表格的代码
Apr 10 Javascript
jQuery焦点控制图层展示延迟隐藏的方法
Mar 09 Javascript
javascript for-in有序遍历json数据并探讨各个浏览器差异
Nov 30 Javascript
JS设置cookie、读取cookie
Feb 24 Javascript
BootstrapTable与KnockoutJS相结合实现增删改查功能【二】
May 10 Javascript
js自调用匿名函数的三种写法(推荐)
Aug 19 Javascript
深入理解jquery中extend的实现
Dec 22 Javascript
简述Angular 5 快速入门
Nov 04 Javascript
JavaScript 实现同时选取多个时间段的方法
Oct 17 Javascript
详解Vue后台管理系统开发日常总结(组件PageHeader)
Nov 01 Javascript
解决vue中使用less/sass及使用中遇到无效的问题
Oct 24 Javascript
详解datagrid使用方法(重要)
Nov 06 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
基于OpenCV的PHP图像人脸识别技术
2009/10/11 PHP
php下删除一篇文章生成的多个静态页面
2010/08/08 PHP
php中拷贝构造函数、赋值运算符重载
2012/07/25 PHP
PHP5下$_SERVER变量不再受magic_quotes_gpc保护的弥补方法
2012/10/31 PHP
php中is_null,empty,isset,unset 的区别详细介绍
2013/04/28 PHP
Prototype使用指南之array.js
2007/01/10 Javascript
背景音乐每次刷新都可以自动更换
2007/02/01 Javascript
js身份证验证超强脚本
2008/10/26 Javascript
JS/jQuery实现默认显示部分文字点击按钮显示全部内容
2013/05/13 Javascript
js获得指定控件输入光标的坐标兼容IE,Chrome,火狐等多种主流浏览器
2013/05/21 Javascript
JavaScript简单实现鼠标拖动选择功能
2014/03/06 Javascript
jQuery实现仿QQ在线客服效果的滚动层代码
2015/10/15 Javascript
javascript实现的猜数小游戏完整实例代码
2016/05/10 Javascript
15款最好的Bootstrap在线编辑器
2016/08/03 Javascript
JS实现评价的星星功能
2017/08/20 Javascript
基于Vuejs的搜索匹配功能实现方法
2018/03/03 Javascript
H5+C3+JS实现双人对战五子棋游戏(UI篇)
2020/05/28 Javascript
vue项目中极验验证的使用代码示例
2019/12/03 Javascript
教你如何将 Sublime 3 打造成 Python/Django IDE开发利器
2014/07/04 Python
Python lambda和Python def区别分析
2014/11/30 Python
简单使用Python自动生成文章
2014/12/25 Python
python分析网页上所有超链接的方法
2015/05/08 Python
解决python3 urllib中urlopen报错的问题
2017/03/25 Python
Python3利用Dlib实现摄像头实时人脸检测和平铺显示示例
2019/02/21 Python
pandas数据处理之绘图的实现
2020/06/15 Python
python实现二分类和多分类的ROC曲线教程
2020/06/15 Python
python 利用jieba.analyse进行 关键词提取
2020/12/17 Python
python如何调用php文件中的函数详解
2020/12/29 Python
基于Pytorch版yolov5的滑块验证码破解思路详解
2021/02/25 Python
CSS3 边框效果
2019/11/04 HTML / CSS
将n个数按输入顺序的逆序排列,用函数实现
2012/11/14 面试题
《花木兰》教学反思
2014/04/09 职场文书
中学生运动会通讯稿大全
2014/09/18 职场文书
2014年店长工作总结
2014/11/17 职场文书
VUE之图片Base64编码使用ElementUI组件上传
2022/04/09 Vue.js
Redis配置外网可访问(redis远程连接不上)的方法
2022/12/24 Redis