Javascript中的异步编程

栏目: JavaScript · 发布时间: 5年前

内容简介:最近,小伙伴S 问了我一段代码:他不太理解这段代码中,funB 函数作为 funA 函数的参数这样的写法。从语义上看,callback 的意思是回调,那么是说 funB 是 funA 的回调嘛?

Javascript中的异步编程

前言

最近,小伙伴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:欢迎关注我的公众号 “超哥前端小栈”,交流更多的想法与技术。

Javascript中的异步编程


以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

JavaScript: The Definitive Guide, 5th Edition

JavaScript: The Definitive Guide, 5th Edition

David Flanagan / O'Reilly Media / 2006-08-01 / USD 49.99

This Fifth Edition is completely revised and expanded to cover JavaScript as it is used in today's Web 2.0 applications. This book is both an example-driven programmer's guide and a keep-on-your-desk ......一起来看看 《JavaScript: The Definitive Guide, 5th Edition》 这本书的介绍吧!

JSON 在线解析
JSON 在线解析

在线 JSON 格式化工具

随机密码生成器
随机密码生成器

多种字符组合密码

HTML 编码/解码
HTML 编码/解码

HTML 编码/解码