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

Promise实战AJAX封装相关推荐

Promise基本使用，promise 与 Ajax封装
Promise是JS中进行异步编程的新的解决方案表达: ①从语法上看:Promise是一个构造函数 (自己身上有all.reject.resolve这几个方法,原型上有then.catch等方法) ...
使用ES6中Promise对象来封装ajax操作以及then方法的返回值
1 Promise的含义所谓Promise,简单说就是一个容器,里面保存着某个未来才会结束的事件(通常是一个异步操作)的结果.从语法上说,Promise 是一个对象,从它可以获取异步操作的消息.Pr ...
promise将ajax变为同步,ES6-Promise改造异步请求为同步
1.扩展:ajax 1.1 代码如下 $.ajax({ url:'地址', type:'get/post', data:{}, dataType:'json/jsonp', success:funct ...
Vue之Axios AJAX封装
来源:我的博客站 OceanicKang |<Vue 之 Axios AJAX封装> 前言才不要写前言,Axios 中文文档 https://www.kancloud.cn/yunye/ ...
jQuery的ajax封装函数
阐述: 在开发的时候,我们会频繁调ajax,但是jQuery又不能使用promise,不遵循ES6的标准.所以很烦. 只能靠自己封装一下ajax来解决下ajax频繁写的过程.也便于日后维护. 封装aj ...
java原生封装_[Java教程]原生AJAX封装
[Java教程]原生AJAX封装 0 2016-07-12 13:00:08 回归下原生js,网上看到的AJAX封装,遂拿来改改,不知还有何弊端,望指出!1 var ajaxHelper = { 2 ...
Ajax工作原理和原生JS的ajax封装
前言: 之所以用ajax作为博客的开篇,是因为无论从ajax的出现还是从它的作用上来说,ajax对于前端无疑是意义重大的.甚至可以说,是ajax带来了前端这个行业.当然,历史并不能说明当下,曾经的辉煌 ...
JS弹窗确认Ajax封装方法
2019独角兽企业重金招聘Python工程师标准>>> 代码示例: var modification = {method: function () {//开始发送数据 $.post ...
Ajax封装2.0版
在之前了解并学习了Ajax的基础知识后,有些朋友可能觉得零碎的Ajax学起来有些繁琐,用起来也不太方便.那么我们为什么不能用函数将它封装起来,在我们需要它的时候便直接使用呢?那今天就让我们学习下Aja ...

Promise实战AJAX封装

Promise实战AJAX封装相关推荐

最新文章

热门文章