Promise实战AJAX封装

一、利用Promise的知识,对最开始的ajax的例子进行一个简单的封装:

var url = 'xxx';
// 封装一个get请求的方法
function request(url){return new Promise(function(resolve,reject){var XHR = new XMLHttpRequest();XHR.open('GET',url,true);XHR.send();XHR.onreadystatechange = function(){if(XHR.readyState==4 && XHR.status == 200){try{var response = JSON.parse(XHR.responseText);resolve(response)} catch(e){reject(e);}}else{reject(new Error(XHR.statusText))}}})}request(url).then(function(res){console.log(res);
})

 二、当有一个ajax请求,它的参数需要另外2个甚至更多请求都有返回结果之后才能确定,这个时候,就需要用到Promise.all

Promise.all接收一个Promise对象组成的数组作为参数,当这个数组所有的Promise对象状态都变成resolved或者rejected的时候,它才会去调用then方法。

url1 = "xxx1"
url2 = "xxx2"function renderAll(){return Promise.all([request(url1),request(url2)])
}renderAll().then(function(value){console.log(value);
})

 三、Promise.race

Promise.race是以一个Promise对象组成的数组作为参数,不同的是,只要当数组中的其中一个Promsie状态变成resolved或者rejected时,就可以调用.then方法了

function renderRace() {return Promise.race([getJSON(url), getJSON(url1)]);
}renderRace().then(function(value) {console.log(value);
})

 欢迎加入大前端交流群!群号:277942610,新建立VIP新群


更多专业前端知识,请上 【猿2048】www.mk2048.com

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

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

相关文章

重新设计Hamcrest

我在Hamcrest库上做了几篇文章 ,我确实很喜欢使用它,但是我希望对其进行一些更改。 我了解他们做出的大多数设计决策,但我认为其中一些确实不值得。 介绍Litecrest 我对库所做的大多数更改都有助于减轻Hamcrest的负担,因为我觉得…

CSS 垂直居中

1、使用绝对定位垂直居中 绝对对位原理:元素在过度受限情况下,将margin设置为auto,浏览器会重算margin的值,过度受限指的是同时设置top/bottom与height或者left/right与width。 .absolute_center{/*display:none;*/position:absol…

Java EE拦截器

历史 我认为重要的是要看一下Java EE中的Interceptor的发展,因为它是从EJB特定的项目开始的,后来又演变成一个单独的规范,现在可供其他Java EE规范扩展,这一事实很简单。 版本1.0 拦截器最初是在EJB 3.0 ( Java EE 5的…

New Begin

已经研究生三年级了, 最近也找好了工作,应该要开始自己的程序人生了。 虽然说写程序也写了很一段时间了, 决定现在开始在cnblogs这个,记录下自己的学习轨迹。开始维护自己的blogs。转载于:https://www.cnblogs.com/binzeehale/ar…

[ExtJs6] 环境搭建及创建项目

1. 环境搭建 sencha cmd 和 extjs6 sdk.sencha cmd: https://www.sencha.com/products/extjs/cmd-download/extjs6: https://www.sencha.com/sencha cmd 安装过程将其加入系统的环境变量path中。export PATH${PATH}:/Users/shuanggai/bin/Sencha/Cmd/6.2.2.36把改语句添加到 ~/…

通过Spring Integration和RabbitMQ获得高可用性的AMQP支持的消息通道

Spring Integration消息通道默认情况下将消息存储在内存中。 这是因为内存速度快,易于实现,并且不会增加网络成本。 但是,在某些情况下,这可能会引起问题,因为如果应用程序崩溃或服务器意外关闭,所有消息都…

有机会多熟悉下开源框架

Struts2,Spring,Hibernate等开源框架的使用转载于:https://www.cnblogs.com/yqskj/archive/2012/11/05/2756085.html

vue之node.js的简单介绍

一、什么是node.js? 它是可以运行JavaScript的服务平台,可以吧它当做一门后端程序,只是它的开发语言是JavaScript 二、安装 1、node.js的特性: - 非阻塞IO模型- 时间驱动 2、运用的场景: - 高并发低业务- 实时场景- 聊…

Java 8 StringJoiner

在Java 8发行版中,最受关注的是Lamda,新的Date API和Nashorn Javascript引擎。 在这些阴影下,有较小但有趣的变化。 其中之一是StringJoiner的引入。 StringJoiner是用于分隔字符或字符串列表的实用程序。 您可能会认出以下代码: …

设置TextView为下划线的样式

1 tvUserTel.setText(Html.fromHtml("<u>"usertel"</u>")); 2 tvUserTel.setTextColor(Color.BLUE);//设置为蓝色 转载于:https://www.cnblogs.com/Tristan2012/archive/2012/11/06/2757239.html

jQuery之jQuery扩展和事件

一、jQuery事件 常用事件 blur([[data],fn]) 失去焦点 focus([[data],fn]) 获取焦点&#xff08; 搜索框例子&#xff09; change([[data],fn]) 当select下拉框中的元素发生改变的时候触发change事件(select例子) click([[data],fn]) 点击 dblclick([[data],fn])…

JavaFX列表示例

这是使用JavaFX构建的示例列表应用程序。 该应用程序是待办事项列表。 此应用程序具有添加&#xff0c;更新和删除列表中项目的功能。 列表数据存储在HSQLDB关系数据库中。 该应用程序使用JDBC&#xff08;Java数据库连接&#xff09;API访问数据库。 该应用程序打包为可执行JA…

flex弹性布局操练2

上一个是练习的1个内元素的&#xff0c;这次练习两个元素的。 ul.box1 {list-style:none;background-color:black;display:flex;justify-content:space-between;/*水平轴的位置,默认是flex-start就是第一种情况*/align-items:center;/*垂直轴的位置*/width:100px;height:100px;…

CDI 2.0更新

CDI 2.0是Java EE平台的上下文和依赖项注入的下一个版本&#xff0c;并且是Java EE 8中包含的候选对象。 自2014年9月以来&#xff0c;它一直在开发中&#xff0c;并且发展Swift&#xff01; CDI 2.0的主要目标 与Java SE 8对齐&#xff08;当然&#xff01;&#xff09; 支持…

一段js实现复制文本内容到剪切板

<script type"text/javascript"> function copyUrl2(){var Url2document.getElementById("biao1").innerText;var oInput document.createElement(input);oInput.value Url2;document.body.appendChild(oInput);oInput.select(); // 选择对象docum…

【Android】自带Theme

?android:theme"android:style/Theme.Dialog" 将一个Activity显示为对话框模式?android:theme"android:style/Theme.NoTitleBar" 不显示应用程序标题栏?android:theme"android:style/Theme.NoTitleBar.Fullscreen" 不显示应用程序标题栏&…

使用Maven Failsafe和JUnit @Category将集成测试与单元测试分开

为什么单元测试应与集成测试分开运行 单元测试级别的TDD相当简单&#xff0c;因为单元测试中的类要么没有复杂的依赖关系&#xff0c;要么使用模拟框架&#xff08;例如Mockito&#xff09;来模拟依赖关系。 但是&#xff0c;当我们进入集成测试时&#xff0c;TDDSwift变得困难…

SVN功能小结 .

基本操作1同步在MyEclipse J2EE透视图下,右击你要同步的工程->小组->与资源库同步->这时会进入同步透视图,会显示出本机与SVN上内容有不同的文件,双击文件名,会显示出两个文件中哪里不同;2提交在同步透视图下有”灰色向右的箭头,表示你本机修改过”,右击该文件,可以选…

Selenium1 Selenium2 WebDriver

内容摘要&#xff1a; Selenium 1 原理WebDriver WebDriver 组件WebDriver 协议 Remote End 处理流程Commands & Endpoints & 请求路由错误消息 WebDriver 配置 Selenium 2 1、Selenium 1 原理 (1).测试用例&#xff08;Testcase&#xff09;通过Client Lib的接口向Se…

Fork / Join框架vs并行流vs.ExecutorService:最终的Fork / Join基准

Fork / Join框架在不同配置下如何工作&#xff1f; 就像即将上映的《星球大战》一样&#xff0c;围绕Java 8并行性的批评也充满了兴奋。 并行流的语法糖带来了一些炒作&#xff0c;就像我们在预告片中看到的新型光剑一样。 现在&#xff0c;有了许多使用Java进行并行处理的方法…