JavaScript异步编程2——结合XMLHttpRequest使用Promise

ajax与promise的结合使用。

目录

1. 概述

2. 详论

3. 参考

在上一篇文章《javascript异步编程1——promise的初步使用》，简单介绍了一下promise的初步使用。复习一下，promise异步编程可以用如下的范式来编写：

定义一个函数（function a)，这个函数返回一个promise对象。

promise对象的参数也是一个function b，内部进行了一个异步操作（通常是javascript提供的api）。

function b对象的参数是两个回调函数resolve和reject。如果函数内部进行的异步操作成功，回调resolve；否则回调reject。

调用function a，返回一个promise对象，这样异步操作就启动了。

调用promise对象的then方法，参数是resolve和reject的真正响应函数。当异步操作完成了，就会执行相应分支的响应函数。

采用以上范式，可以通过promise来进行ajax操作，也就是xmlhttprequest，毕竟这个操作在web应用中实在太常见了。

首先仍然是准备一个html页面：

如果不使用promise，那么相应的javascript代码为：

可以看到这里仍然是通过事件机制来实现异步行为。接下来采用前面提到的编程范式将其改造成promise机制：

改造成promise的过程与上一章并没有什么不同，只不过函数内部调用xmlhttprequest的流程更加复杂些。这两个例子都是将事件改造成promise，那不是意味着对于异步编程而言，promise要优于事件呢？

不能完全这么肯定，但是可以确定的是事件并不总是异步编程的最优实践。一个很显然的问题就是：事件很适合处理在同一对象上多次发生的事情，但是事件侦听器的响应函数可能并不是我们想要的——更多情况下，我们只想要直到两个状态，当异步操作完成的时候该做什么，当异步操作失败的时候又该做什么，而这正是promise擅长处理的。

例如这里的xmlhttprequest操作，事件响应函数onload中的所有行为，并不都是异步请求成功时需要完成的，只有检测访问请求状态为200时候，才需要进行请求成功时的回调函数。使用promise，可以更准确的进行异步行为。

ajax原理-原生js的xmlhttprequest对象意义

javascript异步编程的4种方法