es6 --- 用promise对象实现Ajax操作的一个实例

首先回顾一下Ajax请求的步骤

var client = new XMLHttpRequest(); 
client.open("GET", url);
client.onreadystatechange = handler;
client.responseType = "json";
client.setRequestHeader("Accept", "application/json");
client.send();// 注:onreadystatechange,是Ajax请求状态(readyStatus)改变时执行的函数..
// 使用GET方法获取给定url下的json格式,

再回顾一下工厂模式:

function createPerson(name, age, job) {var o = new Object();o.name = name;o.age = age;o.job = job;o.sayName = function() {alert(this.name);};return o;
}
var person1 = createPerson("Nicholas", 29 ,"Software Engineer");
var person2 = createPerson("Greg", 27, "Doctor");
// 注: 用函数来封装了创建对象的具体细节,再创建实例时,可以直接使用createPerson +  参数的形式

下面是用Promise封装该请求,并提供一个友好接口的例子:

var getJSON = function(url) {var promise = new Promise(function(resolve, reject) {var client = new XMLHttpRequest();client.open("GET", url);client.onreadystatechange = handler;client.responseType = "json";client.setRequesHeader("Accept", "application/json");client.send();function handler() {if (this.readyState !== 4) {return;}if (this.status === 200) {resolve(this.response);} else {reject(new Error(this.statusText));}};});return promise;
};// 调用getJSON
getJSON("/posts.json").then(function(json) {console.log('Contents: ' + json);
}, function(error) {console.error('出错了', error);
});// 注: 用工厂模式,在getJSON函数里面首先创建了一个Promise实例,然后利用创建Ajax请求,最后返回该实例.调用时直接使用getJSON
//  (url)即可
// promise实例中的resolve和 reject方法,来自于调用时候的 .then里面的2个参数,第一个参数对应resolve,第二个参数对应reject

参考《ES6标准入门》(第3版)P276
参考《JavaScript高级程序设计》(第3版) P144

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/251396.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Windows 64 位 mysql 5.7以上版本包解压中没有data目录和my-default.ini以及服务无法启动的解决办法以及修改初始密码的方法...

LZ初学SQL,本来以为开源的安装很简单,但是中间出现了一些问题,记录下来,希望能帮助到他人。 mysql官网下载地址:https://dev.mysql.com/downloads/mysql/点击打开链接 以5.7.20版本为例 首先安装包解压后,没…

总结 构造函数与非构造函数 原型继承的一个方法

这两天真的一直在看原型以及继承之间的千丝万缕,哇,收获颇多,不过所谓温故知新,还是要多复习复习知识点,才能察觉那些之前不易发现的小小sparkle 真心推荐MDN文档——对象原型,JavaScript 中的继承&#x…

【深度学习】caffe 中的一些参数介绍

一个优秀的算法工程师51%的时间在调参数,48%的时间在测试模型,剩下的1%时间再写代码。段子虽然是网上看来的,但调参数是真的心碎。像我这样的小萌新更是觉得无从下手。只有知己知彼(了解每个参数的含义),才…

Vue学习笔记(二)—— vue项目中使用axios

一、文档链接 axios文档 vue开发插件 二、axios 简介 axios 是一个基于Promise 用于浏览器和 nodejs 的 HTTP 客户端,它本身具有以下特征: 从浏览器中创建 XMLHttpRequest 从 node.js 发出 http 请求 支持 Promise API 拦截请求和响应 转换请求和响应…

es6 --- promise.prototype.then的链式引用

很多时候,我们需要使用ajax请求获取数据A.并使用A中的数据A.a来进行下一步的Ajax操作… 下面使用promise.prototype.then的链式引用来实现 // 首先封装一个getJSON的方法. var getJSON function (url) {var promise new Promise(function (resolve, reject) {var client ne…

jquery对json 键值对或数组的增加、删除、遍历操作

在前端遍历json键值对或数组遍历的情况也会经常用到,我们知道在java、c#其它的语言里提供方便的方法来操作,那么在json里面有没有类似的方法呢,废话就不多说了上代码:var jsonStr{}; //增加 jsonStr["name1"]"yu&q…

廖雪峰老师Git教程代码梳理

建立版本库 创建一个版本库非常简单,首先,选择一个合适的地方,创建一个空目录(repository): $ mkdir learngit //创建learngit目录 $ cd learngit //切换当前目录为learngit目录 $ pwd //用于显示当…

BZOJ2006 [NOI2010]超级钢琴 【堆 + RMQ】

2006: [NOI2010]超级钢琴 Time Limit: 20 Sec Memory Limit: 552 MBSubmit: 3446 Solved: 1692[Submit][Status][Discuss]Description 小Z是一个小有名气的钢琴家,最近C博士送给了小Z一架超级钢琴,小Z希望能够用这架钢琴创作出世界上最美妙的音乐。 这…

Vue项目代码改进(六)—— vue的mixins的使用

混入可以将不同组件的共同内容部分在一个混入对象中展示,然后通过在组件实例中混入这个对象,这样拥有这些属性的组件都可以调用 混入对象中的属性名跟组件中的属性名冲突时,以组件自身的为基准 举例:单文件组件users.vue 1&#x…

es6 --- Promise.catch

Promise.prototype.catch(): 是.then(null, rejection)的别名,用于指定发生错误时的回调函数 p.then( (val) -> console.log(fulfilled:, val)).catch( (err) > console.log(rejected, err));// 等同于 p.then( (val) > console.log(fulfilled:, val)).then(null, (e…

爬虫的一些工具(二)

爬虫的一些工具(二) 1. 常有的工具 (1). python(2). pycharm(3).浏览器i.chromeii.火狐(4).fiddler的使用2 fiddler的使用 (1).操作界面(2)界面含义请求(Request)部分详解名称含义Headers显示客户端发送到服务器的 HTTP 请求的,header 显示为一个分级视图,包含了 We…

微信开发者工具一打开代码编辑区文件全部不见了

今天开微信开发者工具时,一打开竟然文件全部不见了!然后页面也编译不出来,搜了一下大神们的建议: 1、在编辑器控制台输入:openVendor 回车 会打开一个文件夹:C:\Users\Administrator\AppData\Local\微信we…

vue项目中所使用的element-UI / echarts

高清版思维导图见后台管理项目地址 1.login登录页面 < el-form >表单 在 Form 组件中&#xff0c;每一个表单域由一个 Form-Item 组件构成&#xff0c;表单域中可以放置各种类型的表单控件&#xff0c;包括 Input、Select、Checkbox、Radio、Switch、DatePicker、TimeP…

es6 --- 使用yield*命令遍历完全二叉树

首先定义二叉树的结构: // 定义二叉树的结构 function Tree(left, label, right) {this.left left;this.label label;this.right right; }// 对二叉树采用中序遍历 function* inorder(t) {if(t) {yield* inorder(t.left);yield t.label;yield* inorder(t.right);} }// 生成…

面向对象之继承与派生

阅读目录 一 初识继承二 继承与抽象&#xff08;先抽象再继承&#xff09;三 继承与重用性四 派生五 组合与重用性六 接口与归一化设计七 抽象类八 继承实现的原理&#xff08;可恶的菱形问题&#xff09;九 子类中调用父类的方法一 初识继承 什么是继承 继承是一种创建新类的方…

SpringBoot(十三)-- 不同环境下读取不同配置

一、场景&#xff1a; 在开发过程中 会使用 开发的一套数据库&#xff0c;测试的时候 又会使用测试的数据库&#xff0c;生产环境中 又会切换到生产环境中。常用的方式是 注释掉一些配置&#xff0c;然后释放一下配置。SpringBoot提供了在不同环境下切换不同配置的功能&#xf…

MDN文档基础知识搜集

Array数组&#xff0c;一种允许你存储多个值在一个引用里的结构。var myVariable [1,Bob,Steve,10]; 引用数组的元素只需&#xff1a;myVariable[0], myVariable[1], 等等. 发布工具: FTP 客户端 你还需要一种将文件从本地硬盘上传到远程Web服务器的方法。 为了做到这一点&am…

vue-cli生成项目时你应当知道的

一、安装 npm install -g vue-cli二、创建项目 vue init 模板名 项目名 vue init webpack mymall模板名: 1 . webpack 最常用 2 . webpack-simple // 一个简单webpackvue-loader的模板&#xff0c;不包含其他功能。 3 . browserify // 一个全面的Browserifyvueify 的模板&am…

es6 --- 正确获取Generator函数内部的this对象使其可以使用new

首先看2个例子 function * g() {this.a 11; }let o g(); console.log(o.a);可以看见Generator函数里面的this指向的对象取不出来. 再看下一个例子: function* F() {yield this.x 2;yield this.y 3; } new F();可以看出Generator函数无法使用new操作符, 下面一共一个解决…

mysql三-3:完整性约束

阅读目录 一 介绍二 not null与default三 unique四 primary key五 auto_increment六 foreign key七 作业一 介绍 约束条件与数据类型的宽度一样&#xff0c;都是可选参数 作用&#xff1a;用于保证数据的完整性和一致性主要分为&#xff1a; PRIMARY KEY (PK) 标识该字段为该…