JavaScript 异步调用


Posted in Javascript onOctober 25, 2017

问题

可修改下面的 aa() 函数,目的是在一抄后用 console.log() 输出 want-value

function aa() {
  setTimeout(function() {
    return "want-value";
  }, 1000);
}

但是,有额外要求:

aa() 函数可以随意修改,但是不能有 console.log()

执行 console.log() 语句里不能有 setTimeout 包裹

解答

也许这是个面试题,管它呢。问题的主要目的是考察对异步调用执行结果的处理,既然是异步调用,那么 不可能同步等待异步结果,结果一定是异步的

setTimeout() 经常用来模拟异步操作。最早,异步是通过回调来通知(调用)处理程序处理结果的

function aa(callback) {
  setTimeout(function() {
    if (typeof callback === "function") {
      callback("want-value");
    }
  }, 1000);
}
aa(function(v) {
  console.log(v);
});

不过回调在用于稍大型一点的异步应用时,容易出现多层嵌套,所以之后提出了一些对其进行“扁平”化,这一部分可以参考闲谈异步调用“扁平”化。当然 Promise 是非常流行的一种方法,并最终被 ES6 采纳。用Promise 实现如下:

function aa() {
  return new Promise(resolve => {
    setTimeout(function() {
      resolve("want-value");
    }, 1000);
  });
}
aa().then(v => console.log(v));

就这个例子来说,它和前面回调的例子大同小异。不过它会引出目前更推荐的一种方法——async/await,从 ES2017 开始支持:

function aa() {
  return new Promise(resolve => {
    setTimeout(function() {
      resolve("want-value");
    }, 1000);
  });
}
async function main() {
  const v = await aa();
  console.log(v);
}
main();

aa() 的定义与 Promise 方法中的定义是一样的,但是在调用的时候,使用了 await ,异步等待,等待到异步的结果之后,再使用 console.log() 对其进行处理。

这里需要注意的是 await 只能在 async 方法中使用,所以为了使用 await 必须定义一个 async 的 main 方法,并在全局作用域中调用。由于 main 方法是异步的(申明为 async),所以如果 main() 调用之后还有其它语句,比如 console.log("hello") ,那么这一句话会先执行。

async/await 语法让异步调用写起来像写同步代码,在编写代码的时候,可以避免逻辑跳跃,写起来会更轻松。(参考: 从地狱到天堂,Node 回调向 async/await 转变 )

当然,定义 main() 再调用 main() 这部分可以用 IIFE 封装一下,

(async () => {
  const v = await aa();
  console.log(v);
})();

总结

以上所述是小编给大家介绍的JavaScript 异步调用,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
起点页面传值js,有空研究学习下
Jan 25 Javascript
XENON基于JSON变种
Jul 27 Javascript
jQuery ul标签下拉菜单演示代码
Dec 11 Javascript
JavaScript中数组的排序、乱序和搜索实现代码
Nov 30 Javascript
Javascript Objects详解
Sep 04 Javascript
JS实现倒计时和文字滚动的效果实例
Oct 29 Javascript
jQuery中scrollTop()方法用法实例
Jan 16 Javascript
JS实现点击按钮获取页面高度的方法
Nov 02 Javascript
文本框只能输入数字的实现方法(兼容IE火狐)
Jun 25 Javascript
js生成随机数(指定范围)的实例代码
Jul 10 Javascript
图片加载完成再执行事件的实例
Nov 16 Javascript
node.js开发辅助工具nodemon安装与配置详解
Feb 06 Javascript
parabola.js抛物线与加入购物车效果的示例代码
Oct 25 #Javascript
通过js控制时间,一秒一秒自己动的实例
Oct 25 #Javascript
js 显示日期时间的实例(时间过一秒加1)
Oct 25 #Javascript
JavaScript编程设计模式之观察者模式(Observer Pattern)实例详解
Oct 25 #Javascript
BootStrap 标题设置跨行无效的解决方法
Oct 25 #Javascript
vue基于mint-ui的城市选择3级联动的示例
Oct 25 #Javascript
浅谈Vue的加载顺序探讨
Oct 25 #Javascript
You might like
十天学会php之第二天
2006/10/09 PHP
PHP的开合式多级菜单程序
2006/10/09 PHP
ThinkPHP CURD方法之order方法详解
2014/06/18 PHP
ThinkPHP框架里隐藏index.php
2016/04/12 PHP
基于PHP后台的Android新闻浏览客户端
2016/05/23 PHP
PHP copy函数使用案例代码解析
2020/09/01 PHP
飞鱼(shqlsl) javascript作品集
2006/12/16 Javascript
javascript 命名规则 变量命名规则
2010/02/25 Javascript
借助script进行Http跨域请求:JSONP实现原理及代码
2013/03/19 Javascript
Extjs单独定义各组件的实例代码
2013/06/25 Javascript
JQuery异步获取返回值中文乱码的解决方法
2015/01/29 Javascript
MVVM模式中ViewModel和View、Model有什么区别?
2015/06/19 Javascript
jquery实现网页的页面平滑滚动效果代码
2015/11/02 Javascript
jQuery添加options点击事件并传值实例代码
2016/05/18 Javascript
vue2.5.2使用http请求获取静态json数据的实例代码
2018/02/27 Javascript
vue-cli3.0 特性解读
2018/04/22 Javascript
vue实现动态添加数据滚动条自动滚动到底部的示例代码
2018/07/06 Javascript
详解JSON Web Token 入门教程
2018/07/30 Javascript
解决vue+element 键盘回车事件导致页面刷新的问题
2018/08/25 Javascript
react MPA 多页配置详解
2019/10/18 Javascript
[05:17]DOTA2誓师:今天我们在这里 明天TI4等我!
2014/03/26 DOTA
[44:37]完美世界DOTA2联赛PWL S3 Forest vs access 第一场 12.11
2020/12/13 DOTA
利用soaplib搭建webservice详细步骤和实例代码
2013/11/20 Python
python回溯法实现数组全排列输出实例分析
2015/03/17 Python
简单了解什么是神经网络
2017/12/23 Python
python3 字符串/列表/元组(str/list/tuple)相互转换方法及join()函数的使用
2019/04/03 Python
画pytorch模型图,以及参数计算的方法
2019/08/17 Python
Python+Dlib+Opencv实现人脸采集并表情判别功能的代码
2020/07/01 Python
python 判断一组数据是否符合正态分布
2020/09/23 Python
加拿大时尚少女服装品牌:Garage
2016/10/10 全球购物
PREMIUM-MALL法国:行李、箱包及配件在线
2019/05/30 全球购物
医学专业大学生求职的自我评价
2013/11/27 职场文书
员工年终演讲稿
2014/01/03 职场文书
老公保证书范文
2014/04/29 职场文书
见习报告格式范文
2014/11/08 职场文书
师德先进个人材料
2014/12/20 职场文书