Promise实现ajax
利用Promise实现ajax
GET
function getAjax(url) {
return new Promise((resolved,rejected)=>{
//创建ajax对象
let ajax = new XMLHttpRequest();
//配置参数
ajax.open('get',url,true)
//发送请求
ajax.send();
//请求成功之后
ajax.onload = function () {
if(this.status === 200){
console.log(ajax.responseText)
resolved(ajax.responseText);
}else{
rejected();
}
}
})
}
getAjax(url).then().catch()
POST
function postAjax(url,param) {
return new Promise((resolved,rejected)=>{
//创建ajax对象
let ajax = new XMLHttpRequest();
//配置参数
ajax.open('post',url,true);
//设置请求头,表示我传递的参数的类型
xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
//发送请求,并将数据传递过去
ajax.send(JSON.stringify(data));
//请求成功之后
ajax.onload = function () {
if(this.status === 200){
console.log(ajax.responseText)
resolved(ajax.responseText);
}else{
rejected();
}
}
})
}
getAjax(url,param).then().catch()
GET \POST合并
function myAjax(type,url,params) {
return new Promise((resolved,rejected)=>{
//创建ajax对象
let ajax;
//注意,不要根据浏览器的navigator.userAgent来检测浏览器是否支持某个JavaScript特性,一是因为这个字符串本身可以伪造,二是通过IE版本判断JavaScript特性将非常复杂。
if (window.XMLHttpRequest) {
ajax = new XMLHttpRequest();
} else {
ajax = new ActiveXObject('Microsoft.XMLHTTP');
}
if(type == 'get' || type == ''){//get
//配置参数
ajax.open('get',url,true)
//发送请求
ajax.send();
}else if(type == 'post'){//post
//配置参数
ajax.open('post',url,true);
//设置请求头,表示我传递的参数的类型
xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
//发送请求,并将数据传递过去
ajax.send(JSON.stringify(data));
}
//请求成功之后
request.onreadystatechange = function (){
if (request.readyState === 4){
if(this.status === 200){
console.log(ajax.responseText)
resolved(ajax.responseText);
}else{
rejected();
}
}
}
})
}
getAjax('get').then().catch()
getAjax('post',param).then().catch()
Promise实现ajax的更多相关文章
- 简单的基于promise的ajax封装
基于promise的ajax封装 //调用方式: /* ajaxPrmomise({ url:, method:, headers:{} }).then(res=>{}) */ ;(functi ...
- Promise 封装 ajax
Promise 封装ajax 成链式结构: var url = 'http'; function(method, url) { return new Promise(function(res, ret ...
- how to make one your own promise version Ajax
how to make one your own promise version Ajax XMLHttpRequest https://developer.mozilla.org/en-US/doc ...
- Promise实战AJAX封装
一.利用Promise的知识,对最开始的ajax的例子进行一个简单的封装: var url = 'xxx'; // 封装一个get请求的方法 function request(url){ return ...
- 20、promise与ajax jsonp
一.Promise的作用是什么? 当有多个请求之间有相互依赖关系(紧接着的请求需要上一次请求的返回结果),这时promise的作用就凸显出来了. 二.如何使用promise? new Promise( ...
- 用promise封装ajax
首先贴代码 var ajaxOptions = { url: 'url', method: 'GET', async: true, data: null, dataType: 'text', } fu ...
- 使用promise封装ajax
直接上代码: function Ajax(method, headers, url, data, progress = null) { return new Promise(function (res ...
- es6中promise实现ajax的例子
function getData(url){ var pro = new Promise(function(resolve,reject){ var xhr = null; try{ xhr = ne ...
- promise封装ajax
promise的含义(本身不是异步,是封装异步操作的容器,统一异步的标准) promise对象的特点:对象的状态不受外界影响:一旦状态改变,就不会再变,任何时候都可以得到这个结果. function ...
随机推荐
- 关于Java数据转存的中MultipartFile转File的问题(转)
转自http://www.cnblogs.com/zuoxiaoxia/p/6116942.html 错误背景:由于文件储存在第三方的服务器上,所有需要讲将接收到MultipartFile文件 转换为 ...
- 1(3)IO流------字符流
一.分类 字节流(不适用于文本) InputStream OutputStream 字符流 Reader Writer 二.字符流 按照字符为单位,英文1-1,中文看是UTF-8编码还是GBK编码 字 ...
- Windows Server 2012配置iis遇到的问题
发布网站访问时报500 - 内部服务器错误,经排查是Windows Server 2012上的iis配置有问题,有些需要的功能没有配置. 在重新配置iis时总是安装失败,提示存储空间不足. 在网上查找 ...
- 下载python包
修改pip下载源 pip install -i https://pypi.tuna.tsinghua.edu.cn/simple pyspider 更新pip版本 python -m pip inst ...
- JAVA for(i = 0; i<a.length; i++) 解析
下列 System.out.printf 语句输出的结果是什么? Char a[]={„a‟,‟b‟,‟c‟,‟d‟,‟e‟}; For(i=0; i<=a.length/2; i++) { c ...
- linux中一些常用的目录简要说明
1.目录结构 /bin:binary的缩写,一些常用的命令如:ls.qwd.cp.cd等命令保存在这个文件内. /boot:启动linux时需要使用到的一些核心文件,以及一些镜像等,删除后系统将无法开 ...
- Echart横坐标时间轴滑动
主要针对于dataZoom的使用,代码如下: option = { title: { text: '未来一周气温变化', subtext: '纯属虚构' }, tooltip: { trigger: ...
- lua 的 break
break ,退出最近的一层循环 return , 一般用于函数,会直接退出所有的循环,或者判断,返回参数 ,,,} for key,value in pairs(tb) do while(t ...
- 在经过身份验证的服务中不支持跨域 javascript 回调
在 asp.net web forms 站点中做了一个 wcf restful service 接口,开启了webforms 身份认证. 当 webforms 站点用户登录之后,访问 restful ...
- Flutter Inspector 功能:Toggle Platform,Show Debug Paint,Show Paint Baselines
Flutter Inspector 功能 说明 Toggle Platform 切换操作系统(Android.iOS) Show Debug Paint Show Paint Baselines Wi ...