JavaScript异步编程2——结合XMLHttpRequest使用Promise
1. 概述
在上一篇文章《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应用中实在太常见了。
2. 详论
首先仍然是准备一个HTML页面：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="./3rdParty/jquery-3.5.1.js"></script>
<title>样例</title>
</head>
<body>
<div id = "container"> </div>
<script src="./PromiseTest.js"></script>
</body>
</html>
如果不使用Promise，那么相应的JavaScript代码为：
$(function () {
var url = "./1.json";
var req = new XMLHttpRequest();
req.open('GET', url);
req.onload = function () {
if (req.status == 200) {
console.log(req.response);
} else {
throw new Error(req.statusText);
}
};
req.onerror = function () {
throw new Error("Network Error");
};
req.send();
});
可以看到这里仍然是通过事件机制来实现异步行为。接下来采用前面提到的编程范式将其改造成Promise机制：
function get(url) {
return new Promise(function (resolve, reject) {
var req = new XMLHttpRequest();
req.open('GET', url);
req.onload = function () {
//即使是404也会进入这个相应函数，所以需要检测状态
if (req.status == 200) {
//完成许诺，返回响应文本
resolve(req.response);
} else {
//完成未完成，返回错误
reject(Error(req.statusText));
}
};
// 发生错误时的相应函数
req.onerror = function () {
reject(Error("Network Error"));
};
// 发送请求
req.send();
});
}
var addressUri = "./1.json";
get(addressUri).then(function (response) {
console.log("Success!", response);
}, function (error) {
console.error("Failed!", error);
});
改造成Promise的过程与上一章并没有什么不同，只不过函数内部调用XMLHttpRequest的流程更加复杂些。这两个例子都是将事件改造成Promise，那不是意味着对于异步编程而言，Promise要优于事件呢？
不能完全这么肯定，但是可以确定的是事件并不总是异步编程的最优实践。一个很显然的问题就是：事件很适合处理在同一对象上多次发生的事情，但是事件侦听器的响应函数可能并不是我们想要的——更多情况下，我们只想要直到两个状态，当异步操作完成的时候该做什么，当异步操作失败的时候又该做什么，而这正是Promise擅长处理的。
例如这里的XMLHttpRequest操作，事件响应函数onload中的所有行为，并不都是异步请求成功时需要完成的，只有检测访问请求状态为200时候，才需要进行请求成功时的回调函数。使用Promise，可以更准确的进行异步行为。
3. 参考
JavaScript异步编程2——结合XMLHttpRequest使用Promise的更多相关文章
- JavaScript 异步编程（二）：Promise
PromiseState Promise 有一个 [[PromiseState]] 属性,表示当前的状态,状态有 pending 和 fulfill 以及 reject. 从第一个 Promise 开 ...
- javascript异步编程，promise概念
javascript 异步编程 概述 采用单线程模式工作的原因: 避免多线dom操作同步问题,javascript的执行环境中负责执行代码的线程只有一个 内容概要 同步模式和异步模式 事件循环和消息队 ...
- JavaScript异步编程原理
众所周知,JavaScript 的执行环境是单线程的,所谓的单线程就是一次只能完成一个任务,其任务的调度方式就是排队,这就和火车站洗手间门口的等待一样,前面的那个人没有搞定,你就只能站在后面排队等着. ...
- JavaScript异步编程的主要解决方案—对不起，我和你不在同一个频率上
众所周知(这也忒夸张了吧?),Javascript通过事件驱动机制,在单线程模型下,以异步的形式来实现非阻塞的IO操作.这种模式使得JavaScript在处理事务时非常高效,但这带来了很多问题,比如异 ...
- javascript异步编程的前世今生，从onclick到await/async
javascript与异步编程 为了避免资源管理等复杂性的问题, javascript被设计为单线程的语言,即使有了html5 worker,也不能直接访问dom. javascript 设计之初是为 ...
- JavaScript异步编程（2）- 先驱者：jsDeferred
JavaScript当前有众多实现异步编程的方式,最为耀眼的就是ECMAScript 6规范中的Promise对象,它来自于CommonJS小组的努力:Promise/A+规范. 研究javascri ...
- Promises与Javascript异步编程
Promises与Javascript异步编程 转载:http://www.zawaliang.com/2013/08/399.html 在如今都追求用户体验的时代,Ajax应用真的是无所不在.加上这 ...
- 5分种让你了解javascript异步编程的前世今生，从onclick到await/async
javascript与异步编程 为了避免资源管理等复杂性的问题,javascript被设计为单线程的语言,即使有了html5 worker,也不能直接访问dom. javascript 设计之初是 ...
- 转: Promises与Javascript异步编程
在如今都追求用户体验的时代,Ajax应用真的是无所不在.加上这些年浏览器技术.HTML5以及CSS3等的发展,越来越多的富Web应用出现:在给与我们良好体验的同时,Web开发人员在背后需要处理越来越多 ...
- JavaScript异步编程
前言 如果你有志于成为一个优秀的前端工程师,或是想要深入学习JavaScript,异步编程是必不可少的一个知识点,这也是区分初级,中级或高级前端的依据之一.如果你对异步编程没有太清晰的概念,那么我建议 ...
随机推荐
- qq群匿名聊怎么用
qq群匿名聊怎么用 1 2 3 4 5 分步阅读 匿名的意思就是不认识.群匿名聊当然是把群里的马甲一下变成不认识的人,再在一起聊天.是不是觉得有点吃饱了没事干,但是当下该功能还是比较实用的,群匿名聊可 ...
- P4032 [Code+#2] 火锅盛宴
prologue 树状数组推荐写法,感谢巨佬樱雪喵的教学. inline int lowbit(int x) { return x & -x; } inline void add(int x, ...
- 2023_10_10_MYSQL_DAY_02_笔记
2023_10_10_MYSQL_DAY_02_笔记 #在 FROM 子句中使用子查询 SELECT a.ename, a.sal, a.deptno, b.salavg FROM emp a, (S ...
- 【PHP反序列化】速览
PHP反序列化 一.原理 序列化就是将对象转化成字符串,反序列化相反.数据的格式转换和对象的序列化有利于对象的保存 . 反序列化漏洞:就是php对数据进行反序列化时,没有进行过滤,导致用户可以控制反序 ...
- 栈溢出-GOT表劫持测试
1.目标程序源代码 char name[64]; int main(){ int unsigned long long addr; setvbuf(stdin,0,2,0); setvbuf(stdo ...
- 01背包问题的js解决方式
如果你有兴趣看这个相信你已经对背包问题有所了解,所以关于背包问题的描述,我就不写了. 只记录一下自己对这个问题的一些看法和思考,于我而言,这个东西现在困扰我的是如何确定最优解. 实质上关于背包问题网上 ...
- 解码注意力Attention机制：从技术解析到PyTorch实战
在本文中,我们深入探讨了注意力机制的理论基础和实际应用.从其历史发展和基础定义,到具体的数学模型,再到其在自然语言处理和计算机视觉等多个人工智能子领域的应用实例,本文为您提供了一个全面且深入的视角.通 ...
- 用结构化思维解一切BUG（2）：实践原则
背景 本文是系列文章<用结构化思维解一切BUG>的第二篇.本系列文章主要介绍一种「无需掌握技术细节,只需结构化思维和常识即可解一切BUG的方法」. 在前序文章<用结构化思维解一切BU ...
- STM8 STM32 GPIO 细节配置问题
在MCU的GPIO配置中我们经常需要预置某一 IO 上电后为某一固定电平, 如果恰好我们需要上电后的某IO为高电平, 那么在配置GPIO的流程上面需要特别注意. 配置如下: (以下问题仅在STM8 / ...
- JS 树形结构 根据子节点找到所有上级
需求:是根据子菜单找到所有他上级菜单 进行面包屑的回显 要求子节点里包含父级id 代码如下: parentTree(arr, id) { //arr 所有的树数据 id 某个子节点的id ...