当前位置:首页 > 日记 > 正文

JavaScript 异步调用

JavaScript 异步调用

问题

可修改下面的 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 异步调用,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对网站的支持!

相关文章

浅析JS中常用类型转换及运算符表达

浅析JS中常用类型转换及运算符表达

运算符,表达式,类型转换,常用,电脑软件,JS中的常用类型转换(一般用强制转换):1.强制转为整数:parseInt;写法:x = parseInt(x);2.强制转换位小为:parseFloat;写法:x = parseFloat(x);3.检测类型:x = parseInt(x); alert(typeof(true));JS中常…

powerpoint怎么做个人简历

powerpoint怎么做个人简历

方法,怎么做,个人简历,电脑软件,简历,  怎么在ppt中制作个人简历呢,一份好的PPT不仅可以吸引观众的眼球同时还可以反映自己的制作能力,下面小编就为你提供用ppt制作个人简历的方法啦,希望小编整理的资料对大家有帮助。用ppt制作个人简历的方…

EditPlus中的正则表达式实战 | 5

EditPlus中的正则表达式实战 | 5

实战,正则表达式,电脑软件,EditPlus,相关阅读:EditPlus中的正则表达式 实战(1)EditPlus中的正则表达式 实战(2)EditPlus 正则表达式 实战(3)EditPlus中的正则表达式 实战(4)EditPlus中的正则表达式实战(5)EditPlus中的正则表达式实战(6)HUAN…

qq安全中心身份证设置图解步骤

qq安全中心身份证设置图解步骤

安全中心,设置,步骤,方法,身份证,  腾讯公司为了大家使用其产品时更加安全,防止账号被盗,以及为了保护未满18岁的人在使用腾讯游戏时不过度沉迷,都使用了qq身份证设置。今天小编给你分享一下qq安全中心设置身份证的方法,欢迎阅读。qq安全中心…

解决Extjs下拉框不显示的问题

解决Extjs下拉框不显示的问题

显示,下拉框,电脑软件,Extjs,问题描述:一个父容器也是window的window下的comboBox在页面中点击无效,但是在控制台中查看它的store却是有值的,问题在于没有显示。页面:控制台调试:解决方案:监听下拉(expand)事件,让下拉的dom堆叠顺序(z-index)置前(设为1…

ps怎么画彩色的鹦鹉头像?

ps怎么画彩色的鹦鹉头像?

鹦鹉,头像,彩色,电脑软件,ps,想要用彩色简单的图案呈现一个漂亮的鹦鹉头部,该怎么绘制呢?下面我们就来看看使用ps绘制鹦鹉头像的教程。软件名称:Adobe Photoshop 8.0 中文完整绿色破解版软件大小:150.1MB更新时间:2015-11-041、先用钢笔工具描出…

JavaScript用二分法查找数据的实例

JavaScript用二分法查找数据的实例

二分法查找,实例代码,数据,电脑软件,JavaScript, 整理文档,搜刮出一个JavaScript用二分法查找数据的实例代码,顺便做个笔记//二分法查数据 var arr=[41,43,45,53,44,95,23]; var b=44; var min=0; var max=arr.length; for(var i=1;i<arr.len…

OAuth认证协议中的HMACSHA1加密算

OAuth认证协议中的HMACSHA1加密算

加密算法,协议,认证,实例,电脑软件,实例如下:<?phpfunction hmacsha1($key,$data) { $blocksize=64; $hashfunc='sha1'; if (strlen($key)>$blocksize) $key=pack('H*', $hashfunc($key)); $key=str_pad($key,$blocksize,chr(0x00)); $…

Photoshop快速制作蒙太奇创意人像

Photoshop快速制作蒙太奇创意人像

教程,蒙太奇,创意,人像,海报,下面小编将教大家如何使用Photoshop快速制作蒙太奇创意人像海报?教程难度不大,只要简单几步就可以轻松完成蒙太奇创意人像海报的制作,可谓是简单粗暴,不过效果却非常惊艳,好了,话不多说,下面让我们先了解一下蒙太奇的…

Angular限制input框输入金额(是小数

Angular限制input框输入金额(是小数

输入,保留两位小数,金额,小数,电脑软件,需求输入框要求输入金额,只能输入数字,可以是小数,必须保留小数点后两位。js判断部分:checkInput: function (event) { var id = event.target.getAttribute(“id”);//获取input的id var reg = /^[-?\d…

excel表格双行工资条如何制作

excel表格双行工资条如何制作

制作方法,工资条,表格,电脑软件,excel,  Excel中单行工资条的制作方法&rdquo;中详细介绍了单行工资条的制作。在本文我们,在来看看双行工资条的制作方法。以下是小编为您带来的关于excel 双行工资条制作方法,希望对您有所帮助。excel 双行…

AI超详细教程:手把手教你绘制复古

AI超详细教程:手把手教你绘制复古

详细教程,绘制,掌机,手把手教你,复古风,编者按:今天的教程特别适合新手,都是基础知识,而且步骤特别细致,软件小白也可以轻松学会。效果图:主要过程:12 3 4 阅读全文1 23 4 阅读全文1 2 34 阅读全文教程结束,以上就是AI超详细教程:手把手教你绘…