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 相关文章推荐
Javascript技术技巧大全(五)
Jan 22 Javascript
关于删除时的提示处理(确定删除吗)
Nov 03 Javascript
提取字符串中年月日的函数代码
Nov 05 Javascript
js实现字符串转日期格式的方法
May 20 Javascript
微信浏览器内置JavaScript对象WeixinJSBridge使用实例
May 25 Javascript
IE10中flexigrid无法显示数据的解决方法
Jul 26 Javascript
微信小程序 欢迎界面开发的实例详解
Nov 30 Javascript
angular-ngSanitize模块-$sanitize服务详解
Jun 13 Javascript
vue2.0在table中实现全选和反选的示例代码
Nov 04 Javascript
javascript中toFixed()四舍五入使用方法详解
Sep 28 Javascript
微信小程序跳转到其他网页(外部链接)的实现方法
Sep 20 Javascript
Vue移动端项目实现使用手机预览调试操作
Jul 18 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中的正则表达式以及模式匹配
2013/06/19 PHP
php用户注册信息验证正则表达式
2015/11/12 PHP
php metaphone()函数及php localeconv() 函数实例解析
2016/05/15 PHP
PHP二维数组矩形转置实例
2016/07/20 PHP
PHP反射机制原理与用法详解
2017/02/15 PHP
PHP实现限制IP访问及提交次数的方法详解
2017/07/17 PHP
windows系统php环境安装swoole具体步骤
2021/03/04 PHP
国外的为初学者写的JavaScript教程
2008/06/09 Javascript
JavaScript高级程序设计 错误处理与调试学习笔记
2011/09/10 Javascript
jquery插件制作 图片走廊 gallery
2012/08/17 Javascript
JavaScript中圆括号()和方括号[]的特殊用法疑问解答
2013/08/06 Javascript
JavaSript中变量的作用域闭包的深入理解
2014/05/12 Javascript
原生JS实现响应式瀑布流布局
2015/04/02 Javascript
基于Vue实现timepicker
2017/04/25 Javascript
谈谈React中的Render Props模式
2018/12/06 Javascript
微信小程序module.exports模块化操作实例浅析
2018/12/20 Javascript
[00:35]DOTA2上海特级锦标赛 MVP.Phx战队宣传片
2016/03/04 DOTA
布同 统计英文单词的个数的python代码
2011/03/13 Python
如何使用 Pylint 来规范 Python 代码风格(来自IBM)
2018/04/06 Python
详解基于django实现的webssh简单例子
2018/07/17 Python
使用Python实现租车计费系统的两种方法
2018/09/29 Python
学习python可以干什么
2019/02/26 Python
python自动化测试之DDT数据驱动的实现代码
2019/07/23 Python
解决Numpy中sum函数求和结果维度的问题
2019/12/06 Python
python pip安装包出现:Failed building wheel for xxx错误的解决
2019/12/25 Python
Python2与Python3的区别详解
2020/02/09 Python
Python栈的实现方法示例【列表、单链表】
2020/02/22 Python
HTML5应用之文件上传
2016/12/30 HTML / CSS
阿提哈德航空官方网站:Etihad Airways
2017/01/06 全球购物
幼儿园英语教学反思
2014/01/30 职场文书
专家推荐信模板
2014/05/09 职场文书
奉献演讲稿范文
2014/05/21 职场文书
处级领导班子全部召开专题民主生活会情况汇报
2014/09/27 职场文书
欢迎新生标语2015
2015/07/16 职场文书
2016年感恩母亲节活动总结
2016/04/01 职场文书
cypress测试本地web应用
2022/06/01 Javascript