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 DOM模型操作
Dec 28 Javascript
JavaScript 面向对象与原型
Apr 10 Javascript
jQuery实现鼠标双击Table单元格变成文本框及输入内容后更新到数据库的方法
Nov 25 Javascript
jQuery prototype冲突的2种解决方法(附demo示例下载)
Jan 21 Javascript
js 上传文件预览的简单实例
Aug 16 Javascript
5种JavaScript脚本加载的方式
Jan 16 Javascript
使用contextMenu插件实现Bootstrap table弹出右键菜单
Feb 20 Javascript
JavaScript切换搜索引擎的导航网页搜索框实例代码
Jun 11 Javascript
ReactNative Image组件使用详解
Aug 07 Javascript
jQuery完成表单验证的实例代码(纯代码)
Sep 30 jQuery
node.js处理前端提交的GET请求
Aug 30 Javascript
JavaScript oncopy事件用法实例解析
May 13 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生成gif动画的方法
2015/11/05 PHP
php 广告点击统计代码(php+mysql)
2018/02/21 PHP
【消息提示组件】,兼容IE6/7&&FF2
2007/09/04 Javascript
仿jQuery的siblings效果的js代码
2011/08/09 Javascript
jQuery EasyUI API 中文文档 - Menu菜单
2011/10/03 Javascript
jquery检测input checked 控件是否被选中的方法
2014/03/26 Javascript
Nodejs sublime text 3安装与配置
2014/06/19 NodeJs
javascript数据结构之二叉搜索树实现方法
2015/11/25 Javascript
Angularjs中UI Router的使用方法
2016/05/14 Javascript
关于数据与后端进行交流匹配(点亮星星)
2016/08/03 Javascript
Js遍历键值对形式对象或Map形式的方法
2016/08/08 Javascript
Javascript点击按钮随机改变数字与其颜色
2016/09/01 Javascript
JS之相等操作符详解
2016/09/13 Javascript
微信小程序 聊天室简单实现
2017/04/19 Javascript
Vue自定义事件(详解)
2017/08/19 Javascript
详解javascript中的babel到底是什么
2018/06/21 Javascript
微信小程序实现tab左右切换效果
2020/11/15 Javascript
vue实现数据控制视图的原理解析
2020/01/07 Javascript
详解element-ui动态限定的日期范围选择器代码片段
2020/07/03 Javascript
Python multiprocessing.Manager介绍和实例(进程间共享数据)
2014/11/21 Python
Python科学计算包numpy用法实例详解
2018/02/08 Python
python3+PyQt5重新实现自定义数据拖放处理
2018/04/19 Python
用vue.js组件模拟v-model指令实例方法
2019/07/05 Python
Python企业编码生成系统之主程序模块设计详解
2019/07/26 Python
解决django 向mysql中写入中文字符出错的问题
2020/05/18 Python
celery在python爬虫中定时操作实例讲解
2020/11/27 Python
python爬虫中的url下载器用法详解
2020/11/30 Python
Python制作运行进度条的实现效果(代码运行不无聊)
2021/02/24 Python
英国最大的化装舞会服装网站:Fancydress.com
2017/08/15 全球购物
香港唯港荟酒店预订:Hotel ICON
2018/03/27 全球购物
法国在线药房:DoctiPharma
2020/10/21 全球购物
会话Bean的种类
2013/11/07 面试题
类和结构的区别
2012/08/15 面试题
党员“四风”问题批评与自我批评思想汇报
2014/10/06 职场文书
教师自查自纠工作情况报告
2014/10/29 职场文书
辞职信怎么写
2015/02/27 职场文书