JavaScript 异步调用——从小小题目逐步走进 JavaScript 异步调用

时间: 2017-10-27阅读: 879标签: js技巧作者: 边城

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

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

但是,有额外要求:

  1.  aa()函数可以随意修改,但是不能有console.log()
  2. 执行  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);
})();
站长推荐

1.阿里云: 本站目前使用的是阿里云主机,安全/可靠/稳定。点击领取2000元代金券、了解最新阿里云产品的各种优惠活动点击进入

2.腾讯云: 提供云服务器、云数据库、云存储、视频与CDN、域名等服务。腾讯云各类产品的最新活动,优惠券领取点击进入

3.广告联盟: 整理了目前主流的广告联盟平台,如果你有流量,可以作为参考选择适合你的平台点击进入

链接: http://www.fly63.com/article/detial/19

通过原生js判断网页图片是否已加载成功的方法总汇

在写网页的程序的时候,经常碰到要在网页加载完全之后再去展现页面,加载中的时候通过显示loading...的样式。这时候我们会直接想到使用window.onload的方式,或者是img对象的complete属性

JS禁止打开控制台

主要为了通过禁止打开控制台,防止别人进行代码调试。禁止右键查看源码和F12;通过页面宽度变化监测控制台;利用控制台特性改写对象toString;利用控制台特性进行监听dom属性

一些 JavaScript 中的代码小技巧

一些 JavaScript 中的代码小技巧:使用函数过滤并序列化对象、用 Set 来实现数组去重、用块级作用域避免命名冲突、函数参数值校验、用解构赋值过滤对象属性、用解构赋值获取嵌套对象的属性、合并对象、使用 === 代替 ==

js中~~和 | 的妙用

~~它代表双非按位取反运算符,如果你想使用比Math.floor()更快的方法,那就是它了。需要注意,对于正数,它向下取整;对于负数,向上取整;非数字取值为0,它具体的表现形式为:

js方式实现手机号码隐藏中间4位

在前端开发中,遇到如下需求:隐藏手机号码,将中间几位替换为*。通过js如何实现手机号码隐藏中间4位呢?下面整理几种实现方式:使用正则、通过长度截取。

js实现HSL与RGB色彩的相互转换功能

RGB和HSL是两种色彩空间,即:红,绿,蓝和色调,饱和度,亮度,前者适用于机器采样,目前的显示器颜色即由这三种基色构成,而后者更符合人类的直观感觉。这篇文章主要介绍原生js实现HSL与RGB相互转换

js判断参数是否为非0整数数字或者整数数字字符串的简单方法(小装逼)

我们来判断一个值是否为数字,可以把它转化为数字,看是否为NaN 然后,再判断是否等于0即可简单的来实现判断了。js判断参数是否为非0整数数字或者整数数字字符串的简单方法

js语言中常见错误总汇

事实证明很多这些 null 或 undefined 的错误是普遍存在的。 一个类似于 Typescript 这样的好的静态类型检查系统,当设置为严格的编译选项时,能够帮助开发者避免这些错误。

5个小技巧让你写出更好的 JavaScript 条件语句

使用 Array.includes 来处理多重条件,少写嵌套,尽早返回,使用函数默认参数和解构,相较于 switch,Map / Object 也许是更好的选择,使用 Array.every 和 Array.some 来处理全部/部分满足条件,让我们一起写出可读性更高的代码吧

值得收藏的15条高效JS技巧

延迟函数delay、分割指定长度的元素数组、获取数组交集、函数柯里化、字符串前面空格去除与替换、获取当前子元素是其父元素下子元素的排位

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!

文章投稿关于web前端网站点搜索站长推荐网站地图站长QQ:522607023

小程序专栏: 土味情话心理测试脑筋急转弯幽默笑话段子句子语录成语大全运营推广