获取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 相关文章推荐
datagrid框架的删除添加与修改
Apr 08 Javascript
JS获取节点的兄弟,父级,子级元素的方法
Jan 09 Javascript
JavaScript 学习笔记之变量及其作用域
Jan 14 Javascript
JS实现向表格行添加新单元格的方法
Mar 30 Javascript
使用jQuery mobile库检测url绝对地址和相对地址的方法
Dec 04 Javascript
在IE8上JS实现combobox支持拼音检索功能
May 23 Javascript
详解前后端分离之VueJS前端
May 24 Javascript
javascript实现非常简单的小数取整功能示例
Jun 13 Javascript
认识less和webstrom的less配置方法
Aug 02 Javascript
js删除数组中某几项的方法总结
Jan 16 Javascript
基于vue-draggable 实现三级拖动排序效果
Jan 10 Javascript
JavaScript字符串转数字的简单实现方法
Nov 27 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
分页显示Oracle数据库记录的类之二
2006/10/09 PHP
PHP 5.0 Pear安装方法
2006/12/06 PHP
php5新改动之短标记启用方法
2008/09/11 PHP
PHP使用栈解决约瑟夫环问题算法示例
2017/08/27 PHP
PHP递归的三种常用方式
2019/02/28 PHP
PHP使用mysqli同时执行多条sql查询语句的实例
2019/03/22 PHP
php快速导入大量数据的实例方法
2019/09/23 PHP
ie focus bug 解决方法
2009/09/03 Javascript
jQuery checkbox全选/取消全选实现代码
2009/11/14 Javascript
javascript学习笔记(五)正则表达式
2011/04/08 Javascript
AJAX跨域请求json数据的实现方法
2013/11/11 Javascript
js动态改变select选择变更option的index值示例
2014/07/10 Javascript
JavaScript数据结构与算法之栈详解
2015/03/12 Javascript
jQuery实现在最后一个元素之前插入新元素的方法
2015/07/18 Javascript
Javascript的表单验证长度
2016/03/16 Javascript
详解Vue路由开启keep-alive时的注意点
2017/06/20 Javascript
Vue学习笔记之表单输入控件绑定
2017/09/05 Javascript
vue.js实现点击后动态添加class及删除同级class的实现代码
2018/04/04 Javascript
浅谈在vue中使用mint-ui swipe遇到的问题
2018/09/27 Javascript
详解如何在vscode里面调试js和node.js的方法步骤
2018/12/24 Javascript
Vue实现根据hash高亮选项卡
2019/05/27 Javascript
Vue-resource安装过程及使用方法解析
2020/07/21 Javascript
详解JS深拷贝与浅拷贝
2020/08/04 Javascript
Python中使用ConfigParser解析ini配置文件实例
2014/08/30 Python
Python设计模式之代理模式实例详解
2019/01/19 Python
Python如何操作docker redis过程解析
2020/08/10 Python
python定义具名元组实例操作
2021/02/28 Python
CSS3 3D立方体效果示例-transform也不过如此
2016/12/05 HTML / CSS
CSS Grid布局教程之浏览器开启CSS Grid Layout汇总
2014/12/30 HTML / CSS
车辆维修工自我评价怎么写
2013/09/20 职场文书
项目采购员岗位职责
2014/04/15 职场文书
机械机修工岗位职责
2014/08/03 职场文书
北京离婚协议书范文2014
2014/09/29 职场文书
评奖评优个人先进事迹材料
2015/11/04 职场文书
MySQL悲观锁与乐观锁的实现方案
2021/11/02 MySQL
Java Spring Boot请求方式与请求映射过程分析
2022/06/25 Java/Android