下面是一个用Promise对象实现的 Ajax 操作的例子。

const getJSON = function(url) {
const promise = new Promise(function(resolve, reject){
const handler = function() {
if (this.readyState !== 4) {
return;
}
if (this.status === 200) {
resolve(this.response);
} else {
reject(new Error(this.statusText));
}
};
const client = new XMLHttpRequest();
client.open("GET", url);
client.onreadystatechange = handler;
client.responseType = "json";
client.setRequestHeader("Accept", "application/json");
client.send(); }); return promise;
}; getJSON("/posts.json").then(function(json) {
console.log('Contents: ' + json);
}, function(error) {
console.error('出错了', error);
});

  

  上面代码中,getJSON是对 XMLHttpRequest 对象的封装,用于发出一个针对 JSON 数据的 HTTP 请求,并且返回一个Promise对象。需要注意的是,在getJSON内部,resolve函数和reject函数调用时,都带有参数。

ES6 用Promise对象实现的 Ajax 操作的更多相关文章

  1. 用Promise对象实现的 Ajax 操作

  2. ES6的Promise对象

    http://es6.ruanyifeng.com/#docs/promise Promise 对象 Promise 的含义 基本用法 Promise.prototype.then() Promise ...

  3. ES6的promise对象研究

    ES6的promise对象研究 什么叫promise? Promise对象可以理解为一次执行的异步操作,使用promise对象之后可以使用一种链式调用的方式来组织代码:让代码更加的直观. 那我们为什么 ...

  4. 教你如何使用ES6的Promise对象

    教你如何使用ES6的Promise对象 Promise对象,ES6新增的一个全新特性,这个是 ES6中非常重要的一个对象 Promise的设计初衷 首先,我们先一起了解一下,为什么要设计出这么一个玩意 ...

  5. ES6 - promise对象

    Promise的设计初衷 我们使用ajax请求数据,得到数据后再对数据进行操作,可是有时候,对得到的数据进行操作的过程中,可能又要用到ajax请求,这时,我们的代码就变成了这样: $.ajax({ s ...

  6. ES6中Promise对象个人理解

    Promise是ES6原生提供的一个用来传递异步消息的对象.它减少了传统ajax金字塔回调,可以将异步操作以同步操作的流程表达出来使得代码维护和可读性方面好很多. Promise的状态: 既然是用来传 ...

  7. 谈谈 ES6 的 Promise 对象

    https://segmentfault.com/a/1190000002928371 前言 开篇首先设想一个日常开发常常会遇到的需求:在多个接口异步请求数据,然后利用这些数据来进行一系列的操作.一般 ...

  8. 前端知识点回顾之重点篇——ES6的Promise对象

    Promise Promise 是异步编程的一种解决方案,比传统的解决方案--回调函数和事件--更合理和更强大. 所谓Promise,简单说就是一个容器,里面保存着某个未来才会结束的事件(通常是一个异 ...

  9. ES6的promise对象应该这样用

    ES6修补了一位Js修真者诸多的遗憾. 曾几何时,我这个小白从js非阻塞特性的坑中爬出来,当我经历了一些回调丑陋的写法和优化的尝试之后,我深深觉得js对于多线程阻塞式的开发语言而言,可能有着其太明显的 ...

随机推荐

  1. MySQL5.7 多源复制监控脚本

    #!/bin/bash :<<BLOCK Version : v1.0 2018-12-21 MySQL多源复制检测脚本 监控配置放在 $CONFIG_FILE 中,内容如下 #mysql ...

  2. wireshark抓包结果很多[TCP Retransmission]怎么办?

    有一同事问用wireshark抓包时发现很多[TCP Retransmission],这些包极大影响了自己真正想看的http数据包,如下图. 我拿到pcapng后首先看到这些包的来源ip都是固定的两个 ...

  3. 配置firewalld防火墙

    题:请按下列要求在 system1 和 system2 上设定防火墙系统: 允许 group8.example.com 域的客户对 system1 和 system2 进行 ssh 访问. 禁止 my ...

  4. webpack搭建项目时出现的报错“Module build failed (from ./node_modules/css-loader/dist/cjs.js) CssSyntaxError”

    控制台出现的错误如下: webpack.config.js中的配置如下: module.exports={ entry:'./src/main.js', output:{ path:__dirname ...

  5. 复旦大学2016--2017学年第一学期(16级)高等代数I期末考试第七大题解答

    七.(本题10分)  设 $A,B$ 均为 $m\times n$ 阶实矩阵, 满足 $A'B+B'A=0$. 证明: $$r(A+B)\geq\max\{r(A),r(B)\},$$并且等号成立的充 ...

  6. Pandas 基础(11) - 用 melt 做格式转换

    melt 也可以用来做数据格式转换, 请看下图, 我们可以用 melt 把左表转成右表的格式: 首先引入文件(已上传): df = pd.read_csv('/Users/rachel/Sites/p ...

  7. _map_char_stats

    可以控制玩家进入地图后进行属性平衡. `comment` 备注 `map` 地图ID `vip`vip等级 `shengming`生命 `liliang` 力量 `minjie` 敏捷 `zhili` ...

  8. Flex外包公司——案例汇总

    Flex做的案例汇总: http://flex.org/showcase/ http://taggraph.com/everybody http://demoprod.informationbuild ...

  9. beyond compare 免费版

    链接:https://pan.baidu.com/s/10lPUEpFPZU76HRbJfbZ2ZA 提取码:r2go

  10. IDEA复制某个类的包名路径

    在对应的类中右键: 然后看图: