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 ...
随机推荐
- oracle data type
NUMBER ( precision, scale) precision表示数字中的有效位.如果没有指定precision的话,Oracle将使用38作为精度. scale表示数字小数点右边的位数,s ...
- JSP + JDBC + MySQL 读取数据库内容到网页
创建数据库表 导入JDCB驱动 mysql.jsp <%@ page language="java" %> <%@ page contentType=" ...
- buildroot管理uboot+kernel+rootfs
鉴于自己制作根文件系统太麻烦了,所以想用buildroot管理uboot,kernel,另外还可以自动生产rootfs,于是花了两天研究了下buildroot的框架和使用,在自己的2440开发板上也跑 ...
- vue重温之mint-ui------------点击事件绑定
第一次接触mint-ui,在使用它的tabbar时,为了达到点击切换页面的效果,采用了点击事件的方式,然后就碰到了这么个问题: 是的,点击事件是不起作用的. 然后刚好一个朋友也在做这块,而且有一段时间 ...
- a标签通过浏览器下载远程图片
<a href="http://fooku.oss-cn-hongkong.aliyuncs.com/image/store/2nblHVyB6cWyBI7Aq2SEp6aZRBlui ...
- Day 17 常用模块
一.时间模块:time 1.时间戳:time.time() # 可以作为数据的唯一标识 print(time.time) # 1554878849.8452318 2.延迟线程的运行:time.sle ...
- 安装owncloud出现:Error while trying to create admin user: An exception occurred while executing
安装owncloud出现:Error while trying to create admin user: An exception occurred while executing 1.安装ownc ...
- JavaScript代码优化
1.if else 语句中变量赋值为布尔值 if (a > b) { status = true; } else { status = false; } // 可以简化为 status = a ...
- php7带来的性能升级
前言本文是一篇讲座听后+后续研究的总结. 话说当年追时髦,php7一出就给电脑立马装上了,php5和php7共存,也是立马写了个超级耗时间的循环脚本测了一番,确实php7给力很多,然后也是注意了一些新 ...
- Centos 6.9 install Python3.7
# install python3sudo yum -y updatesudo yum -y install yum-utils yum install -y zlib-devel bzip2-dev ...