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

时间: 2017-10-27阅读: 306标签: 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);
})();

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

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

js中实现sleep暂停/睡眠功能的多种方式

由于很多语言都有sleep函数,但是js中没有,下面介绍JavaScript实现类似sleep的多种方式:利用循环、Promise版本 、通过generate来实现、通过 Async/Await 封装、使用node-sleep

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

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

创建js hook钩子_js中的钩子机制与实现

钩子机制也叫hook机制,或者你可以把它理解成一种匹配机制,就是我们在代码中设置一些钩子,然后程序执行时自动去匹配这些钩子;这样做的好处就是提高了程序的执行效率,减少了if else 的使用同事优化代码结构

js实现浏览器:加入收藏、设为首页、保存到桌面的方法功能

在一些网页中我们可以常见的“设置为首页”和“ 收藏本站”,以及“保存到桌面”等功能,使用js是如何实现的呢?这里为大家分享下实现方法,完美兼容IE,chrome,ff等浏览器

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

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

js中一些怪异的写法_神奇的JavaScript

JavaScript是一门伟大的语言,作为一门弱类型语言,它拥有非常简洁的语法,庞大的生态系统,灵活性非常强大。js各种神奇的写法,所谓的神奇也就是罕见。下面就开始介绍这些怪异的写法吧。

JavaScript:处理值为undefined的7个技巧

学习JavaScript时,当时我对于undefined 和 null 比较困惑 ,因为他们都表示空值。他们有什么明确的区别吗?他们似乎都可以定义一个空值,而且 当你进行 在做null ===undefined 的比较时,结果是true。

更快学习 JS 的 6 个简单思维技巧

当人们尝试学习 JavaScript , 或者其他编程技术的时候,有些概念容易混淆,特别是当你学习过其他语言的时候。很难找到学习的时间(有时候是动力)。一旦当你理解了一些东西的时候,却很容易再一次忘记。

使用纯粹的JS构建 Web Component

Web Component 出现有一阵子了。 Google 费了很大力气去推动它更广泛的应用,但是除 Opera 和 Chrome 以外的多数主流浏览器对它的支持仍然不够理想。Web Component 是一系列 web 平台的 API,它们可以允许你创建全新可定制、可重用并且封装的 HTML 标签,从而在普通网页及 web 应用中使用。