Javascript中的异步编程

2019-01-14 admin

图片描述

前言

最近,小伙伴S 问了我一段代码:

const funB = (value) => {
    console.log("funB "+ value);
};

const funA = (callback) => {
    ...
    setTimeout(() => {
        typeof callback === "function" && callback("is_ok!");
    }, 1000);
}

funA(funB);

他不太理解这段代码中,funB 函数作为 funA 函数的参数这样的写法。从语义上看,callback 的意思是回调,那么是说 funB 是 funA 的回调嘛?

我给他解释说,funB 函数的确是 funA 函数的回调,它会等待 funA 中前面的语句都执行完,再去执行。这是一种异步编程的写法。

小伙伴S 还是有点不太理解。他问:异步编程是什么?除了回调函数之外,异步编程还有哪些?

别急,让我们先从概念入手,再逐个理解异步编程中的方法,看看它的前世今生。

什么是异步?

所谓"异步"(Asynchronous),可以理解为一种不连续的执行。简单地说,就是把一个任务分成两段,先执行第一段,然后转而执行其他任务,等接到通知了,再回过头执行第二段。

我们都知道,JavaScript是单线程的。而异步,对于JavaScript的重要性,则体现在非阻塞这一点上。一些常见的异步有:

  • onclick 在其事件触发的时候,回调会立即添加到任务队列中。
  • setTimeout 只有当时间到达的时候,才会将回调添加到任务队列中。
  • ajax 在网络请求完成并返回之后,才将回调添加到任务队列中。

接下来,我们一起来看看Javascript中的异步编程,具体有哪几种。

实现异步编程的方法

一、回调函数

上面不止一次提到了回调函数。它从概念上说很简单,就是把任务的第二段单独写在一个函数里面,等到重新执行这个任务的时候,就直接调用这个函数。它是异步编程中,最基本的方法。

举个例子,假定有两个函数 f1 和 f2,后者等待前者的执行结果。顺序执行的话,可以这样写:

f1();
f2();

但是,如果 f1 是一个很耗时的任务,该怎么办?

改写一下 f1,把 f2 写成 f1 的回调函数:

const f1 = (callback) => {
    setTimeout(() => {
        typeof callback === "function" && callback();
    }, 1000);
}
f1(f2);

二、事件监听

onclick 的写法,在异步编程中,称为事件监听。它的思路是:如果任务的执行不取决于代码的顺序,而取决于某个事件是否发生,也就事件驱动模式。

还是 f1 和 f2 的例子,为了简化代码,这里采用jQuery的写法:

// 为f1绑定一个事件,当f1发生done事件,就执行f2
f1.on('done', f2);

// 改写f1
function f1(){
    setTimeout(() => {
        // f1的任务代码,执行完成后,立即触发done事件
        f1.trigger('done');
    }, 1000);
}

它的优点是:比较容易理解,耦合度降低了。可以绑定多个事件,而且每个事件还能指定多个回调函数。

缺点是:整个程序都会变为由事件来驱动,流程会变得很不清晰。

三、发布/订阅

这是一种为了处理一对多的业务场景而诞生的设计模式,它也是一种异步编程的方法。vue中MVVM的实现,就有它的功劳。

关于概念,我们可以这样理解,假定存在一个"信号中心",某个任务执行完成,就向信号中心"发布"(publish)一个信号,其他任务可以向信号中心"订阅"(subscribe)这个信号,从而知道什么时候自己可以开始执行。这就叫做"发布/订阅模式"(publish-subscribe pattern),又称"观察者模式"(observer pattern)。

下面的例子,采用的是 Morgan Roderick 的 PubSubJS ,这是一个无依赖的JavaScript插件:

import PubSub from 'pubsub-js';

// f2向 'PubSub' 订阅信号 'done'
PubSub.subscribe('done', f2);

const f1 = () => {
    setTimeout(() => {
        // f1执行完成后,向 'PubSub' 发布信号 'done',从而执行 f2
        PubSub.publish('done');
    }, 1000);
};
f1();

// f2 完成执行后,也可以取消订阅
PubSub.unsubscribe("done", f2);

这种模式有点类似于“事件监听”,但是明显优于后者。因为,我们可以通过查看“消息中心”,了解存在多少信号、每个信号有多少订阅者,从而监控程序的运行。

四、Promise对象

接下来,我们聊聊与ajax相关的异步编程方法,Promise对象。

Promise 是由 CommonJS 提出的一种规范,它是为了解决回调函数嵌套,也就是回调地狱的问题。它不是新的语法功能,而是一种新的写法,允许将回调函数的横向加载,改成纵向加载。它的思想是,每一个异步任务返回一个Promise对象,该对象有一个then方法,允许指定回调函数。

继续改写 f1 和 f2:

const f1 = () => {
    return new Promise((resolve, reject) => {
        let timeOut = Math.random() * 2;
        setTimeout(() => {
            if (timeOut < 1) {
                resolve('200 OK');
            } else {
                reject('timeout in ' + timeOut + ' seconds.');
            }
        }, 1000);
    });  
};

const f2 = () => {
    console.log('start f2');  
};

f1().then((result) => {
    console.log(result);
    f2();
}).catch((reason) => {
    ...
);

例子中,用随机数模拟了请求的超时。当 f1 返回 Promise 的 resolve 时,执行 f2。

Promise的优点是:回调函数变成了链式的写法,程序的流程可以看得很清楚。还有就是,如果一个任务已经完成,再添加回调函数,该回调函数会立即执行。所以,你不用担心是否错过了某个状态。

缺点就是:编写和理解,都相对比较难。

五、Generator

generator(生成器)是 ES6 标准引入的数据类型。它最大特点,就是可以交出函数的执行权(即暂停执行),是协程在 ES6 中的实现。

看上去它像一个函数,定义如下:

function* gen(x) {
  var y = yield x + 2;
  return y;
}

它不同于普通函数,函数名之前要加星号(*),是可以暂停执行的。

整个 Generator 函数就是一个封装的异步任务,或者说是异步任务的容器。用 yield 语句注明异步操作需要暂停的地方。

我们来看一下 Generator 函数执行的过程:

var g = gen(1);

// { value: 3, done: false }
g.next();
// { value: undefined, done: true }
g.next();

上面代码中,调用 Generator 函数,会返回一个内部指针(即遍历器 )g 。这是 Generator 函数不同于普通函数的另一个地方,即执行它不会返回结果,返回的是指针对象。调用指针 g 的 next 方法,会移动内部指针(即执行异步任务的第一段),指向第一个遇到的 yield 语句,上例是执行到 x + 2 为止。

换言之,next 方法的作用是分阶段执行 Generator 函数。每次调用 next 方法,会返回一个对象,表示当前阶段的信息( value 属性和 done 属性)。value 属性是 yield 语句后面表达式的值,表示当前阶段的值;done 属性是一个布尔值,表示 Generator 函数是否执行完毕,即是否还有下一个阶段。

六、async/await

这是 ES8 中提出的一种更优雅的异步解决方案,灵感来自于 C# 语言。具体可前往 细说 async/await 相较于 Promise 的优势 ,深入理解其原理及特性。

来看个例子,要实现一个暂停功能,输入 N 毫秒,则停顿 N 毫秒后才继续往下执行。

const sleep = (time) => {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve();
        }, time);
    })
};

const start = async () => {
    console.log('start');
    // 在这里使用起来就像同步代码那样直观
    await sleep(1000);
    console.log('end');
};

start();

控制台先输出 start,稍等 1 秒后,输出结果 ok,最后输出 end。

解析一下上述代码:

  • async 表示这是一个async函数,await 只能用在这个函数里面。
  • await 表示在这里等待 promise 返回了结果,再继续执行。
  • 使用起来,就像写同步代码一样地优雅。

总结

JavaScript的异步编写方式,从 回调函数 到 async/await,感觉在写法上,每次都有进步,其本质就是一次次对语言层抽象的优化。以至于现在,我们可以像同步一样地,去处理异步。

换句话说就是:异步编程的最高境界,就是根本不用关心它是不是异步

PS:欢迎关注我的公众号 “超哥前端小栈”,交流更多的想法与技术。 1877824921-5c2b6771cf4b9_articlex

原文链接:https://segmentfault.com/a/1190000017889536

本站文章除注明转载外,均为本站原创或编译。欢迎任何形式的转载,但请务必注明出处。

转载请注明:文章转载自 JavaScript中文网 [https://www.javascriptcn.com]

本文地址:https://www.javascriptcn.com/read-50989.html

文章标题:Javascript中的异步编程

相关文章
JavaScript教程:JS中的原型
Keith Peters 几年前发表的一篇博文,关于学习没有“new”的世界,其中解释了使用原型继承代替构造函数。两者都是纯粹的原型编码。 标准方法(The Standard Way) 一直以来,我们学习的在 JavaScript 里创建对...
2015-11-12
javascript是什么意思
avaScript是Netscape开发的一个对象脚本语言,它使用在世界各地数以百万计的网页和服务器应用程序上。 网景的JavaScript是ecma - 262版的标准脚本语言,和公布的标准只有轻微的差异。 与广为流行的错误理解相反,Ja...
2015-11-12
21天学通javascript
简介: 本书是Javascript入门教程。Javascript是Web开发中应用最早、发展最成熟、用户最多的脚本语言。其语法简洁,代码可读性在众多脚本语言中最好,它在使用时不用考虑数据类型,是真正意义上的动态语言。本书总分为四篇,共21章...
2015-11-16
JavaScript的组成
一个完整的JavaScript由3个部分组成:核心(ECMAScript) 文档对象模型(DOM) 浏览器对象模型(BOM) ECMAScript 描述了该语言的语法和基本对象 ; DOM 描述了处理网页内容的方法和接口 ; BOM 描...
2015-11-12
JavaScript 事件流、事件处理程序及事件对象总结
JS与HTML之间的交互通过事件实现。事件就是文档或浏览器窗口中发生的一些特定的交互瞬间。可以使用监听器(或处理程序)来预定事件,以便事件发生时执行相应的代码。这种在传统软件工程中被称为观察员模式,支持页面的行为与页面的外观之间的松散耦合。...
2017-04-05
JavaScript变量的声明
声明变量 变量在脚本中的首次亮相是在其声明中。 在变量首次出现时将会在内存中设置它,因此您稍后可在脚本中引用它。 应在使用变量之前先声明变量。 可以使用 var 关键字实现此目的。 &lt;span id=“mt9” class=“sent...
2015-11-12
javaScript+turn.js实现图书翻页效果实例代码
为了实现图书翻页的效果我们在网上可以看到很多教程 在这里推荐turn.js 网上的turn.js 有api 不过是英文的  很多人看起来不方便 .关于代码也是奇形怪状在这里我将详细讲解如何使用turn.js实现翻页效果 ,本篇文章只是讲解 ...
2017-03-16
7个提高效率的JavaScript调试工具
鐜板湪鐨凧avaScript浜嬪疄涓婂凡鐒舵垚涓轰簡娴佽�岀殑web璇�瑷€锛屽嵆浣垮畠骞朵笉瀹岀編銆傚緢澶氱▼搴忓憳涓嶅枩娆㈢敤JavaScript鍐欎唬鐮侊紝鏄�鍥犱负鍐欏埌鍚庢潵鎬讳細鍑虹幇鍚勭�嶈帿鍚嶅叾濡欑殑bug锛岃€屼笖鍦ㄥ紑...
2015-11-11
JavaScript短路原理精简代码
js中||和&amp;&amp;的特性帮我们精简了代码的同时,也带来了代码可读性的降低,虽然高效,但请灵活使用。 在js逻辑运算中,0、&quot;&quot;、null、false、undefined、NaN都会判为false,其他都为t...
2015-11-12
7个让JavaScript变得更好的注意事项
随着浏览器性能提高,伴随着新的HTML5的编程接口的稳步采用,网页上的JavaScript的音量在逐渐增加。然而,一个写得不好的程序编码却拥有着打破整个网站,让用户为之沮丧和驱赶潜在客户的潜力。 开发人员必须使用所有供他们任意使用的工具和技...
2015-11-12
回到顶部