javascript异步编程,js异步编程的理解

promise执行顺序

在我们的工作和学习当中，到处充满了异步的身影，到底什么是异步，什么是异步编程，为什么要用异步编程，以及经典的异步编程有哪些，在工作中的场景又有什么，我们一点点深入的去学习。

什么是异步编程？

有必要了解一下，什么是异步编程，为什么要异步编程。

先说一个概念异步与同步。介绍异步之前，回顾一下，所谓同步编程，就是计算机一行一行按顺序依次执行代码，当前代码任务耗时执行会阻塞后续代码的执行。

同步编程，即是一种典型的请求-响应模型，当请求调用一个函数或方法后，需等待其响应返回，然后执行后续代码。

一般情况下，同步编程，代码按序依次执行，能很好的保证程序的执行，但是在某些场景下，比如读取文件内容，或请求服务器接口数据，需要根据返回的数据内容执行后续操作，读取文件和请求接口直到数据返回这一过程是需要时间的，网络越差，耗费时间越长。

如果按照同步编程方式实现，在等待数据返回这段时间，JavaScript是不能处理其他任务的，此时页面的交互，滚动等任何操作也都会被阻塞，这显然是及其不友好，不可接受的，而这正是需要异步编程大显身手的场景。

我们想通过Ajax请求数据来渲染页面，这是一个在我们前端当中很常见渲染页面的方式。基本每个页面都会都这样的过程。在这里用同步的方式请求页面会怎么样？浏览器锁死，不能进行其他操作。而且每当发送新的请求，浏览器都会锁死，用户体验极差。

在浏览器中同步执行将会是上面的这个样子，任务1做完才能做任务2，任务2做完才会做任务3。这里面体现出同步编程的有序的特点。只能1，2，3不能1，3，2。但是我们的代码逻辑中可以存在多任务同时执行的过程。在我们生活中，煮饭和烧水可以同时去做，同样在我们编程中也需要这样的逻辑。

在计算机中有多线程的概念，什么意思呢，每一个线程做一件事，像下面这样。

在不同的线程中可以执行不同的任务。

但是我们的JavaScript是单线程的，这里的单线程，强调的执行线程是单线程。后面也是有线程池的，线程以及线程池的概念在这里就不多说了。想了解的同学可以看看操作系统相关书籍。

JavaScript语言执行环境是单线程的，单线程在程序执行时，所走的程序路径按照连续顺序排下来，前面的必须处理好，后面的才会执行。

但是我们也需要类似多线程机制的这种执行方式。但是JavaScript还是单线程的，我们需要异步执行，异步执行会使得多个任务并发执行。

并行与并发。前文提到多线程的任务可以并行执行，而JavaScript单线程异步编程可以实现多任务并发执行，这里有必要说明一下并行与并发的区别。

并行，指同一时刻内多任务同时进行。边煮饭，边烧水，可以同时进行并发，指在同一时间段内，多任务同时进行着，但是某一时刻，只有某一任务执行。边吃饭边喝水，同一时间点只能喝水和吃饭。

接下来说一说异步机制

并发模型

目前，我们已经知道，JavaScript执行异步任务时，不需要等待响应返回，可以继续执行其他任务，而在响应返回时，会得到通知，执行回调或事件处理程序。那么这一切具体是如何完成的，又以什么规则或顺序运作呢？接下来我们需要解答这个问题。回调和事件处理程序本质上并无区别，只是在不同情况下，不同的叫法。

前文已经提到，JavaScript异步编程使得多个任务可以并发执行，而实现这一功能的基础是JavaScript拥有一个基于事件循环的并发模型。

堆栈与队列

介绍JavaScript并发模型之前，先简单介绍堆栈和队列的区别：

堆（heap）：内存中某一未被阻止的区域，通常存储对象（引用类型）；

栈（stack）：后进先出的顺序存储数据结构，通常存储函数参数和基本类型值变量（按值访问）；

队列（queue）：先进先出顺序存储数据结构。

事件循环（EventLoop）：JavaScript引擎负责解析，执行JavaScript代码，但它并不能单独运行，通常都得有一个宿主环境，一般如浏览器或Node服务器，前文说到的单线程是指在这些宿主环境创建单一线程，提供一种机制，调用JavaScript引擎完成多个JavaScript代码块的调度，执行（是的，JavaScript代码都是按块执行的），这种机制就称为事件循环（EventLoop）。

JavaScript执行环境中存在的两个结构需要了解：

消息队列(messagequeue)，也叫任务队列（taskqueue）：存储待处理消息及对应的回调函数或事件处理程序；

执行栈(executioncontextstack)，也可以叫执行上下文栈：JavaScript执行栈，顾名思义，是由执行上下文组成，当函数调用时，创建并插入一个执行上下文，通常称为执行栈帧（frame），存储着函数参数和局部变量，当该函数执行结束时，弹出该执行栈帧；

注：关于全局代码，由于所有的代码都是在全局上下文执行，所以执行栈顶总是全局上下文就很容易理解，直到所有代码执行完毕，全局上下文退出执行栈，栈清空了；也即是全局上下文是第一个入栈，最后一个出栈。

任务

分析事件循环流程前，先阐述两个概念，有助于理解事件循环：同步任务和异步任务。

任务很好理解，JavaScript代码执行就是在完成任务，所谓任务就是一个函数或一个代码块，通常以功能或目的划分，比如完成一次加法计算，完成一次ajax请求；很自然的就分为同步任务和异步任务。同步任务是连续的，阻塞的；而异步任务则是不连续，非阻塞的，包含异步事件及其回调，当我们谈及执行异步任务时，通常指执行其回调函数。

[img]

相关问答

Q1: 前端开发如何学习才好呢。

学习前端主要有自学和报班学习两种方式。

近几年，前端的发展还是非常好的，市场需求大，加上学习起来也相对简单，有众多人选择并学习。web前端学成之后的就业岗位还是非常多的，网页制作，小程序开发等等，都是web前端可以做的。

学习的内容包括：

①计算机基础以及PS基础

②前端开发基础（HTML5开发、JavaScript基础到高级、jQuery网页特效、Bootstrap框架）

③移动开发

④前端高级开发（ECMAScript6、Veu.js框架开发、webpack、前端页面优化、React框架开发、AngularJS 2.0框架开发等）

⑤小程序开发

⑥全栈开发（MySQL数据库、Python编程语言、Django框架等）

⑦就业拓展（网站SEO与前端安全技术）

互联网行业目前还是最热门的行业之一，学习IT技能之后足够优秀是有机会进入腾讯、阿里、网易等互联网大厂高薪就业的，发展前景非常好，普通人也可以学习。

想要系统学习，你可以考察对比一下开设有相关专业的热门学校，好的学校拥有根据当下企业需求自主研发课程的能力，能够在校期间取得大专或本科学历，中博软件学院、南京课工场、南京北大青鸟等开设相关专业的学校都是不错的，建议实地考察对比一下。

祝你学有所成，望采纳。

Q2: javascript中异步操作的异常怎么处理

一、JavaScript异步编程的两个核心难点

异步I/O、事件驱动使得单线程的JavaScript得以在不阻塞UI的情况下执行网络、文件访问功能，且使之在后端实现了较高的性能。然而异步风格也引来了一些麻烦，其中比较核心的问题是：

1、函数嵌套过深

JavaScript的异步调用基于回调函数，当多个异步事务多级依赖时，回调函数会形成多级的嵌套，代码变成

金字塔型结构。这不仅使得代码变难看难懂，更使得调试、重构的过程充满风险。

2、异常处理

回调嵌套不仅仅是使代码变得杂乱，也使得错误处理更复杂。这里主要讲讲异常处理。

二、异常处理

像很多时髦的语言一样，JavaScript 也允许抛出异常，随后再用一个try/catch

语句块捕获。如果抛出的异常未被捕获，大多数JavaScript环境都会提供一个有用的堆栈轨迹。举个例子，下面这段代码由于'{'为无效JSON

对象而抛出异常。

?

12345678

function JSONToObject(jsonStr) { return JSON.parse(jsonStr);}var obj = JSONToObject('{');//SyntaxError: Unexpected end of input//at Object.parse (native)//at JSONToObject (/AsyncJS/stackTrace.js:2:15)//at Object.anonymous (/AsyncJS/stackTrace.js:4:11)

堆栈轨迹不仅告诉我们哪里抛出了错误，而且说明了最初出错的地方：第4 行代码。遗憾的是，自顶向下地跟踪异步错误起源并不都这么直截了当。

异步编程中可能抛出错误的情况有两种：回调函数错误、异步函数错误。

1、回调函数错误

如果从异步回调中抛出错误，会发生什么事？让我们先来做个测试。

?

1234567

setTimeout(function A() { setTimeout(function B() { setTimeout(function C() { throw new Error('Something terrible has happened!'); }, 0); }, 0);}, 0);

上述应用的结果是一条极其简短的堆栈轨迹。

?

12

Error: Something terrible has happened!at Timer.C (/AsyncJS/nestedErrors.js:4:13)

等等，A 和B 发生了什么事？为什么它们没有出现在堆栈轨迹中？这是因为运行C 的时候，异步函数的上下文已经不存在了，A 和B 并不在内存堆栈里。这3

个函数都是从事件队列直接运行的。基于同样的理由，利用try/catch

语句块并不能捕获从异步回调中抛出的错误。另外回调函数中的return也失去了意义。

?

1234567

try { setTimeout(function() { throw new Error('Catch me if you can!'); }, 0);} catch (e) {console.error(e);}

看到这里的问题了吗？这里的try/catch 语句块只捕获setTimeout函数自身内部发生的那些错误。因为setTimeout

异步地运行其回调，所以即使延时设置为0，回调抛出的错误也会直接流向应用程序。

总的来说，取用异步回调的函数即使包装上try/catch 语句块，也只是无用之举。（特例是，该异步函数确实是在同步地做某些事且容易出错。例如，Node

的fs.watch(file,callback)就是这样一个函数，它在目标文件不存在时会抛出一个错误。）正因为此，Node.js

中的回调几乎总是接受一个错误作为其首个参数，这样就允许回调自己来决定如何处理这个错误。

2、异步函数错误

由于异步函数是立刻返回的，异步事务中发生的错误是无法通过try-catch来捕捉的，只能采用由调用方提供错误处理回调的方案来解决。

例如Node中常见的function (err, ...)

{...}回调函数，就是Node中处理错误的约定：即将错误作为回调函数的第一个实参返回。再比如HTML5中FileReader对象的onerror函数，会被用于处理异步读取文件过程中的错误。

举个例子，下面这个Node 应用尝试异步地读取一个文件，还负责记录下任何错误（如“文件不存在”）。

?

1234567

var fs = require('fs'); fs.readFile('fhgwgdz.txt', function(err, data) { if (err) { return console.error(err); }; console.log(data.toString('utf8'));});

客户端JavaScript 库的一致性要稍微差些，不过最常见的模式是，针对成败这两种情形各规定一个单独的回调。jQuery 的Ajax

方法就遵循了这个模式。

?

1234

$.get('/data', { success: successHandler, failure: failureHandler});

不管API 形态像什么，始终要记住的是，只能在回调内部处理源于回调的异步错误。

三、未捕获异常的处理

如果是从回调中抛出异常的，则由那个调用了回调的人负责捕获该异常。但如果异常从未被捕获，又会怎么样？这时，不同的JavaScript环境有着不同的游戏规则……

1. 在浏览器环境中

现代浏览器会在开发人员控制台显示那些未捕获的异常，接着返回事件队列。要想修改这种行为，可以给window.onerror

附加一个处理器。如果windows.onerror 处理器返回true，则能阻止浏览器的默认错误处理行为。

?

123

window.onerror = function(err) { return true; //彻底忽略所有错误};

在成品应用中， 会考虑某种JavaScript 错误处理服务， 譬如Errorception。Errorception

提供了一个现成的windows.onerror 处理器，它向应用服务器报告所有未捕获的异常，接着应用服务器发送消息通知我们。

2. 在Node.js 环境中

在Node 环境中，window.onerror 的类似物就是process 对象的uncaughtException 事件。正常情况下，Node

应用会因未捕获的异常而立即退出。但只要至少还有一个uncaughtException 事件处理

器，Node 应用就会直接返回事件队列。

?

123

process.on('uncaughtException', function(err) { console.error(err); //避免了关停的命运！});

但是，自Node 0.8.4 起，uncaughtException 事件就被废弃了。据其文档所言，对异常处理而言，uncaughtException

是一种非常粗暴的机制，请勿使用uncaughtException，而应使用Domain 对象。

Domain 对象又是什么？你可能会这样问。Domain 对象是事件化对象，它将throw 转化为'error'事件。下面是一个例子。

?

123456789

var myDomain = require('domain').create();myDomain.run(function() { setTimeout(function() { throw new Error('Listen to me!') }, 50);});myDomain.on('error', function(err) { console.log('Error ignored!');});

源于延时事件的throw 只是简单地触发了Domain 对象的错误处理器。

Error ignored!

很奇妙，是不是？Domain 对象让throw

语句生动了很多。不管在浏览器端还是服务器端，全局的异常处理器都应被视作最后一根救命稻草。请仅在调试时才使用它。

四、几种解决方案

下面对几种解决方案的讨论主要集中于上面提到的两个核心问题上，当然也会考虑其他方面的因素来评判其优缺点。

1、Async.js

首先是Node中非常著名的Async.js，这个库能够在Node中展露头角，恐怕也得归功于Node统一的错误处理约定。

而在前端，一开始并没有形成这么统一的约定，因此使用Async.js的话可能需要对现有的库进行封装。

Async.js的其实就是给回调函数的几种常见使用模式加了一层包装。比如我们需要三个前后依赖的异步操作，采用纯回调函数写法如下：

?

12345678910111213141516

asyncOpA(a, b, (err, result) = { if (err) { handleErrorA(err); } asyncOpB(c, result, (err, result) = { if (err) { handleErrorB(err); } asyncOpB(d, result, (err, result) = { if (err) { handlerErrorC(err); } finalOp(result); }); });});

如果我们采用async库来做：

?

12345678910111213141516171819202122

async.waterfall([ (cb) = { asyncOpA(a, b, (err, result) = { cb(err, c, result); }); }, (c, lastResult, cb) = { asyncOpB(c, lastResult, (err, result) = { cb(err, d, result); }) }, (d, lastResult, cb) = { asyncOpC(d, lastResult, (err, result) = { cb(err, result); }); }], (err, finalResult) = { if (err) { handlerError(err); } finalOp(finalResult);});

可以看到，回调函数由原来的横向发展转变为纵向发展，同时错误被统一传递到最后的处理函数中。

其原理是，将函数数组中的后一个函数包装后作为前一个函数的末参数cb传入，同时要求：

每一个函数都应当执行其cb参数;cb的第一个参数用来传递错误。我们可以自己写一个async.waterfall的实现：

?

12345678910111213141516171819202122

let async = { waterfall: (methods, finalCb = _emptyFunction) = { if (!_isArray(methods)) { return finalCb(new Error('First argument to waterfall must be an array of functions')); } if (!methods.length) { return finalCb(); } function wrap(n) { if (n === methods.length) { return finalCb; } return function (err, ...args) { if (err) { return finalCb(err); } methods[n](...args, wrap(n + 1)); } } wrap(0)(false); }};

Async.js还有series/parallel/whilst等多种流程控制方法，来实现常见的异步协作。

Async.js的问题：

在外在上依然没有摆脱回调函数，只是将其从横向发展变为纵向，还是需要程序员熟练异步回调风格。

错误处理上仍然没有利用上try-catch和throw，依赖于“回调函数的第一个参数用来传递错误”这样的一个约定。

2、Promise方案

ES6的Promise来源于Promise/A+。使用Promise来进行异步流程控制，有几个需要注意的问题，

把前面提到的功能用Promise来实现，需要先包装异步函数，使之能返回一个Promise：

?

12345678910

function toPromiseStyle(fn) { return (...args) = { return new Promise((resolve, reject) = { fn(...args, (err, result) = { if (err) reject(err); resolve(result); }) }); };}

这个函数可以把符合下述规则的异步函数转换为返回Promise的函数：

回调函数的第一个参数用于传递错误，第二个参数用于传递正常的结果。接着就可以进行操作了：

?

123456789101112131415

let [opA, opB, opC] = [asyncOpA, asyncOpB, asyncOpC].map((fn) = toPromiseStyle(fn)); opA(a, b) .then((res) = { return opB(c, res); }) .then((res) = { return opC(d, res); }) .then((res) = { return finalOp(res); }) .catch((err) = { handleError(err); });

通过Promise，原来明显的异步回调函数风格显得更像同步编程风格，我们只需要使用then方法将结果传递下去即可，同时return也有了相应的意义：

在每一个then的onFullfilled函数（以及onRejected）里的return，都会为下一个then的onFullfilled函数（以及onRejected）的参数设定好值。

如此一来，return、try-catch/throw都可以使用了，但catch是以方法的形式出现，还是不尽如人意。

3、Generator方案

ES6引入的Generator可以理解为可在运行中转移控制权给其他代码，并在需要的时候返回继续执行的函数。利用Generator可以实现协程的功能。

将Generator与Promise结合，可以进一步将异步代码转化为同步风格：

?

1234567891011

function* getResult() { let res, a, b, c, d; try { res = yield opA(a, b); res = yield opB(c, res); res = yield opC(d); return res; } catch (err) { return handleError(err); }}

然而我们还需要一个可以自动运行Generator的函数：

?

123456789101112131415161718192021222324252627282930

function spawn(genF, ...args) { return new Promise((resolve, reject) = { let gen = genF(...args); function next(fn) { try { let r = fn(); if (r.done) { resolve(r.value); } Promise.resolve(r.value) .then((v) = { next(() = { return gen.next(v); }); }).catch((err) = { next(() = { return gen.throw(err); }) }); } catch (err) { reject(err); } } next(() = { return gen.next(undefined); }); });}

用这个函数来调用Generator即可：

?

1234567

spawn(getResult) .then((res) = { finalOp(res); }) .catch((err) = { handleFinalOpError(err); });

可见try-catch和return实际上已经以其原本面貌回到了代码中，在代码形式上也已经看不到异步风格的痕迹。

类似的功能有co/task.js等库实现。

4、ES7的async/await

ES7中将会引入async function和await关键字，利用这个功能，我们可以轻松写出同步风格的代码，

同时依然可以利用原有的异步I/O机制。

采用async function，我们可以将之前的代码写成这样：

?

12345678910111213

async function getResult() { let res, a, b, c, d; try { res = await opA(a, b); res = await opB(c, res); res = await opC(d); return res; } catch (err) { return handleError(err); }} getResult();

和Generator Promise方案看起来没有太大区别，只是关键字换了换。

实际上async

function就是对Generator方案的一个官方认可，将之作为语言内置功能。

async function的缺点：

await只能在async function内部使用，因此一旦你写了几个async function，或者使用了依赖于async

function的库，那你很可能会需要更多的async function。

目前处于提案阶段的async

function还没有得到任何浏览器或Node.JS/io.js的支持。Babel转码器也需要打开实验选项，并且对于不支持Generator的浏览器来说，还需要引进一层厚厚的regenerator

runtime，想在前端生产环境得到应用还需要时间。

以上就是本文的全部内容，希望对大家的学习有所帮助。

Q3: javascript同步和异步的区别与实现方式

javascript语言是单线程机制。所谓单线程就是按次序执行，执行完一个任务再执行下一个。

对于浏览器来说，也就是无法在渲染页面的同时执行代码。

单线程机制的优点在于实现起来较为简单，运行环境相对简单。缺点在于，如果中间有任务需要响应时间过长，经常会导致

页面加载错误或者浏览器无响应的状况。这就是所谓的“同步模式”，程序执行顺序与任务排列顺序一致。对于浏览器来说，

同步模式效率较低，耗时长的任务都应该使用异步模式；而在服务器端，异步模式则是唯一的模式，如果采用同步模式个人认为

服务器很快就会出现12306在高峰期的表现。。。。

异步模式的四种方式：

1.回调函数callback

所谓回调函数，就是将函数作为参数传到需要回调的函数内部再执行。

典型的例子就是发送ajax请求。例如：

$.ajax({

async: false,

cache: false,

dataType: 'json',

url: "url",

success: function(data) {

console.log('success');

},

error: function(data) {

console.log('error');

}

})

当发送ajax请求后，等待回应的过程不会堵塞程序运行，耗时的操作相当于延后执行。

回调函数的优点在于简单，容易理解，但是可读性较差，耦合度较高，不易于维护。

2.事件驱动

javascript可以称之为是基于对象的语言，而基于对象的基本特征就是事件驱动（Event-Driven）。

事件驱动，指的是由鼠标和热键的动作引发的一连串的程序操作。

例如，为页面上的某个

$('#btn').onclick(function(){

console.log('click button');

});

绑定事件相当于在元素上进行监听，是否执行注册的事件代码取决于事件是否发生。

优点在于容易理解，一个元素上可以绑定多个事件，有利于实现模块化；但是缺点在于称为事件驱动的模型后，流程不清晰。

3.发布/订阅

发布订阅模式（publish-subscribe pattern）又称为观察者模式(Observer pattern)。

该模式中，有两类对象：观察者和目标对象。目标对象中存在着一份观察者的列表，当目标对象

的状态发生改变时，主动通知观察者，从而建立一种发布/订阅的关系。

jquery有相关的插件，在这不是重点不细说了。。。。回头写个实现贴上来

4.promise模式

promise对象是CommonJS工作组提供的一种规范，用于异步编程的统一接口。

promise对象通常实现一种then的方法，用来在注册状态发生改变时作为对应的回调函数。

promise模式在任何时刻都处于以下三种状态之一：未完成（unfulfilled）、已完成（resolved）和拒绝（rejected）。以CommonJS

Promise/A

标准为例，promise对象上的then方法负责添加针对已完成和拒绝状态下的处理函数。then方法会返回另一个promise对象，以便于形成promise管道，这种返回promise对象的方式能够支持开发人员把异步操作串联起来，如then(resolvedHandler,

rejectedHandler); 。resolvedHandler

回调函数在promise对象进入完成状态时会触发，并传递结果；rejectedHandler函数会在拒绝状态下调用。

Jquery在1.5的版本中引入了一个新的概念叫Deferred，就是CommonJS promise A标准的一种衍生。可以在jQuery中创建

$.Deferref的对象。同时也对发送ajax请求以及数据类型有了新的修改，参考JQuery API。

除了以上四种，javascript中还可以利用各种函数模拟异步方式，更有诡异的诸如用同步调用异步的case

只能用team里同事形容java和javascript的一句话作为结尾：

“写java像在高速路上开车，写javascript像在草原上开车”-------------以此来形容javascript这种无类型的语言有多自由

but，如果草原上都是坑。

Q4: 前端开发有什么书籍推荐

入门可以通过啃书，但书本上的东西很多都已经过时了，在啃书的同时，也要关注技术的新动态。

这里推荐几本觉得还不错的入门书籍：

1、《JavaScript高级编程》：可以作为入门书籍，但同时也是高级书籍，可以快速吸收基础，等到提升再回来重新看看。

2、《JavaScript权威指南》：不太适合入门，但是必备，不理解的地方就去查阅一下，很有帮助。

3、《编写可维护的JavaScript》和《Node.js开发指南》：不错的Node.js入门书籍。

4、《深入浅出的Node.js》：Node.js进阶书籍，必备。

5、《JavaScript异步编程》：理解JS异步的编程理念。

6、《JavaScript模式》和《JavaScript设计模式》：JavaScript的代码模式和设计模式，从源码级别讲解框架的各个部分的实现，配合一个现有框架阅读，可以学到很多东西。

7、《JavaScript框架设计》：在用轮子同时，应当知道轮子是怎么转起来的，讲解很详细，从源码级别讲解框架的各个部分的实现，配合一个现有框架阅读，可以学到很多东西。

8、《Dont make me think》：网页设计的理念，了解用户行为，非常不错。

9、《CSS禅意花园》：经久不衰的一部著作，同样传递了网页设计中的理念以及设计中需要注意的问题。

10、《高性能JavaScript》和《高性能HTML5》：强调性能的书，其中不只是性能优化，还有很多原理层面的东西值得学习。

11、《HTML5 Canvas核心技术》：我正在读的一本书，对于canvas的使用，动画的实现，以及动画框架的开发都非常有帮助。

12、《HTTP权威指南》：HTTP协议相关必备，前端开发调试的时候也会经常涉及到其中的知识。

13、《响应式Web设计》：技术本身不难，重要的是响应式网页的设计理念，以及移动先行的思想

14、《JavaScript语言精粹》：老道的书，也是普及JavaScript的开发思维的一本好书，非常适合入门。