关闭

谈谈Javascript异步代码优化

时间: 2018-05-11阅读: 995标签: 编程作者: 转载

关于


前言

在实际编码中,我们经常会遇到JavaScript代码异步执行的场景,比如ajax的调用、定时器的使用等,在这样的场景下也经常会出现这样那样匪夷所思的bug或者糟糕的代码片段,那么处理好你的JavaScript异步代码成为了异步编程至关重要的前提。下面我们从问题出发,一步步完善你的异步代码。


异步问题


1. 回调地狱

首先,我们来看下异步编程中最常见的一种问题,便是回调地狱。它的出现是由于异步代码执行时间的不确定性及代码间的依赖关系引发的,比如:

// 一个动画结束后,执行下一个动画,下一个动画结束后再执行下一个动画
$('#box').animate({width: '100px'}, 1000, function(){
    $('#box').animate({height: '100px'}, 1000, function(){
        $('#box').animate({left: 100}, 1000);
    });
});

由于我们不知道第一个动画什么时候开始或者什么时候结束,所以我们把第二个动画的执行内容放到了第一个动画的结束事件里,把第三个动画放到了第二个动画的结束事件里,这时候如果有很多这样的动画,那么就会形成回调地狱。


2. 捕获异常

除了回调地狱,如果我们需要在异步代码中捕获异常也比较麻烦,可能需要手动配置捕获方法:

try {
    throw new Error('fail');
} catch (e) {
    console.log(e);
}

这样的代码书写明显不是我们想要的,不仅不利于维护,而且也在一定程度上违背了良好的Javascript编码规范。


解决方案

那么我们如何优雅的写好我们的异步代码呢?我主要列了以下5种常见方案:


1. callback

callback顾名思义便是回调,但并不是将回调内容放在异步方法里,而是放到外部的回调函数中,比如问题1的代码我们通过callback可以变成这样:

$('#box').animate({width: '100px'}, 1000, autoHeight);

function autoHeight() {
    $('#box').animate({height: '100px'}, 1000, autoLeft);
}

function autoLeft() {
    $('#box').animate({left: 100}, 1000);
}

如此我们看似异步的代码变成了同步的写法,避免了层层嵌套的写法,看上去也流畅了很多。同时使用callback也是异步编程最基础和核心的一种解决思路。


2. Promise

基于callback,Promise目前也被广泛运用,其是异步编程的一种解决方案,比传统的回调函数解决方案更合理和强大。相信了解ES6的同学肯定不会陌生。

比如我们现在有这样一个场景,我们需要异步加载一张图片,在图片加载成功后做一些操作,这里我不想用回调函数或者将逻辑写在图片的成功事件里,那么用Promise我们可以这样写:

let p = new Promise((resolve, reject) => {
    let img = new Image(); // 创建图片对象

    // 图片加载成功事件
    img.onload = function() {
        resolve(img); // 输出图片对象
    };

    // 图片加载失败事件
    img.onerror = function() {
        reject(new Error('load error')); // 输出错误
    };

    img.src = 'xxx'; // 图片路径
});

// Promise then回调
p
.then(result => {
    $('#box').append(result); // 成功后我们把图片放到页面上
})
.catch(error => {
    console.log(error); // 打印错误
})

通过Promise我们把图片构建加载的逻辑和成功或失败后的处理逻辑拆分了开来,将回调函数的嵌套,改成链式调用,同时使用Promise的catch事件回调后异常捕获也变得十分方便。

当然如果要等待多个异步请求完成执行某些操作,可以使用Promise.all方法,如:

let p = Promise.all([p1, p2, p3]); // 其中p1、p2、p3都是Promise实例

p.then(result => console.log(result));

当然Promise也有其相应的缺点,比如下一个then回调只能获取上一个then返回的数据,不能跨层获取,同时大量的then回调也会使代码不容易维护。


3. Generator

与Promise一样,Generator 函数也是 ES6 提供的一种异步编程解决方案,其会返回一个遍历器对象,异步任务需要暂停的地方我们可以使用yield语句,比如:

function* getData() {
    let result = yield fetch("xxx"); // 调用ajax,yield命令后面只能是 Thunk 函数或 Promise 对象

    console.log(result);
}

// 执行
let g = getData();
let result = g.next(); // { value: [object Promise], done: false }

result.value.then(data => {
    return data.json();
}).then(data => {
    g.next(data);
});

Generator中遇到yield的地方会进行暂停,所以我们需要手动调用next方法往下,next返回值的 value 属性便是我们需要的数据,这里是fetch方法返回的Promise对象,所以我们需要使用then回调,最后再调用g.next(data)结束并输出数据。

Generator 函数的缺点在于,我们每一次执行yield语句都需要手动进行next,不是很方便。


4. co

为了解决上方Generator函数需手动执行next方法的问题,TJ Holowaychuk大神编写了一个co函数库,能够使Generator 函数可以自动执行,比如原来我们需要这样:

let files = function* (){
    var f1 = yield readFile('/xxx/xxx'); // 读取file1文件
    var f2 = yield readFile('/xxx/xxx'); // 读取file2文件

    console.log(f1.toString());
    console.log(f2.toString());
};

files.next(); // 执行yield
files.next(); // 执行yield

使用co后:

var co = require('co');

co(files);

co 函数返回一个 Promise 对象,因此可以用 then 方法添加回调函数。

co(files).then(() => {
  console.log('执行完成');
});

最后我们可以看到我们没有手动执行next方法,也会打印出所读取的文件。

co模块虽然很好的帮助了我们解决了Generator函数必须靠执行器的问题,但是使用起来我们都需要额外引入一个模块,那么有没有更加方便的方式来解决呢?继续往下看。


5. async and await

除了以上4中方式可以解决Javascript异步编程的问题外,ES7还提供了更加方便的async 函数和await命令,了解一下?

其实async是 Generator 函数的语法糖,不同点在于其内置了执行器,也就是说async函数自带执行器。看一下下面的例子:

let p1 = new Promise((resolve, reject) => {
    setTimeout(() => {
        resolve(1);
    }, 1000);
});

let p2 = new Promise((resolve, reject) => {
    setTimeout(() => {
        resolve(2); 
    }, 1000);
});

async function waitFn() {
    let a = await p1; // await命令后面可以是 Promise 对象和原始类型的值,如果使原始类型最终也会返回为Promise对象
    let b = await p2;

    return a + b
}

// async函数的返回值是 Promise 对象, 可以用then方法指定下一步的操作
waitFn().then(result => {
    console.log(result);  // 2s后输出3
});

async函数内部return语句返回的值,会成为then方法回调函数的参数。因此这就像极了利用co包裹起来的Generator函数,只是把*替换成了async,把yield替换成了await。

可以说async and await 是ES7中最重要的一个特性,虽然其也存在一些弊端,但是相比较而言用其处理异步代码来说还是比较得心应手的。


结语

本文简单介绍了处理好Javascript异步代码的五种常见方式,每一种方式都有其使用和存在的条件和必要性,有兴趣的同学可以对其进行单独的拓展和探究,只有了解并掌握每一种方式各自的优点并加以运用,才能享受异步编程带来的快感。

转载请注明来自——微信公众号:前端呼啦圈(Love-FED)


站长推荐

1.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

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

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

程序员获取编程灵感的 10 种方式

有时我会陷入读着编程书但编不了程的陷阱。我不能总是找到一个可工作的有趣项目,即使我知道有大量的机会。如果你有相同的问题,这里的一些提示可能会有所帮助。

英语基础太差,能学好编程吗?

很多刚开始学编程的人都会问,我英文差能学会编程吗??学会编程不需要多高深的英语水平,想要学会编程,简单的英语水平足够了。现在的程序开发环境又很友好,基本上打开之后不需要怎么配置

通晓多种编程语言的程序员,真香?

一般认为多语种编程这一术语是 Neal Ford 在 2006 年的一篇博客文章中创造出来的。Dean Wampler 在 2010 年的演讲中进一步补充丰富了 Neal 的观点,他重申不同的编程语言在不同领域有各自的优势,且程序员应该使用最好的工具来完成工作

程序员的笔记,编程写软件学到的 7 件事

如果你真的做出了一些东西,在面对那些令人眼花缭乱的理论知识,或是和你相似甚至比你做的更糟糕的人时大可不必谦虚。在一天结束之时,正是那些在战壕中的开发者——构建、测试和开发了代码的人,真正做了事情。

自学编程的网站有那些?

如今,很大一部分人在学习编程的道路上都选择自学,但都苦于找不到适合自己的学习资源,今天为大家介绍11个免费的自学编程的网站,为大家提供一些帮助。很多人自学编程,都会通过w3school,你可以通过它学习所有的网站建设基础教程

React 端的编程范式

dvajs 是 Alibaba 针对于 react/redux 技术栈基于 elm 概念编写的一套脚手架。两年前因为 antd 开始接触了这套脚手架。我的确很需要这套脚手架

对编程累觉不爱?学会这5招,让你重燃激情!

总的来说,无论是把编程作为职业还是爱好,你都会时常感到枯燥乏味。 我不会故意说它乐趣无穷。 它会耗尽你做很多事情的精力和斗志。但编程并非注定如此。

一个老程序员对自己当前编程技术处在哪个水平的反思

编程界公认的,经典的程序员修炼进阶模型,这个模型给程序员定义的4重境界:无意识无能力——不知道自己不知道;有意识无能力——知道自己不知道;有意识有能力——知道自己知道;无意识有能力——不知道自己知道

不要再尝试函数式编程了

也许你曾听说过所谓的“函数式”编程。也许你甚至在想接下来是否要尝试一下。但是,函数式编程有很多缺陷,并不适用于现实项目的开发,并且会造成工作效率的下降。欲知详情,且听本文娓娓道来

技术编程人员成长的 9 个段位

很多人都问,技术人员如何成长,每个阶段又是怎样的,如何才能走出当前的迷茫,实现自我的突破。所以我结合我自己 10 多年的从业经验,总结了技术人员成长的 9 个段位

点击更多...

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