利用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的更多相关文章

  1. 简单的基于promise的ajax封装

    基于promise的ajax封装 //调用方式: /* ajaxPrmomise({ url:, method:, headers:{} }).then(res=>{}) */ ;(functi ...

  2. Promise 封装 ajax

    Promise 封装ajax 成链式结构: var url = 'http'; function(method, url) { return new Promise(function(res, ret ...

  3. 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 ...

  4. Promise实战AJAX封装

    一.利用Promise的知识,对最开始的ajax的例子进行一个简单的封装: var url = 'xxx'; // 封装一个get请求的方法 function request(url){ return ...

  5. 20、promise与ajax jsonp

    一.Promise的作用是什么? 当有多个请求之间有相互依赖关系(紧接着的请求需要上一次请求的返回结果),这时promise的作用就凸显出来了. 二.如何使用promise? new Promise( ...

  6. 用promise封装ajax

    首先贴代码 var ajaxOptions = { url: 'url', method: 'GET', async: true, data: null, dataType: 'text', } fu ...

  7. 使用promise封装ajax

    直接上代码: function Ajax(method, headers, url, data, progress = null) { return new Promise(function (res ...

  8. es6中promise实现ajax的例子

    function getData(url){ var pro = new Promise(function(resolve,reject){ var xhr = null; try{ xhr = ne ...

  9. promise封装ajax

    promise的含义(本身不是异步,是封装异步操作的容器,统一异步的标准) promise对象的特点:对象的状态不受外界影响:一旦状态改变,就不会再变,任何时候都可以得到这个结果. function ...

随机推荐

  1. Web 建站技术中,HTML、HTML5、XHTML、CSS、SQL、JavaScript、PHP、ASP.NET、Web Services 是什么(转)

    Web 建站技术中,HTML.HTML5.XHTML.CSS.SQL.JavaScript.PHP.ASP.NET.Web Services 是什么?修改 建站有很多技术,如 HTML.HTML5.X ...

  2. 1ubuntu安装虚拟机

    安装相关打软件:(qemu-kvm qemu-system是kvm和qemu的核心包,libvirt-bin用于管理kvm,virt-manager图形管理工具,bridge-utils vlan,主 ...

  3. jquery学习-document.ready和document.onload区别

    $(function(){}) 和$(document).ready(function(){}的作用一样,表示在document树加载完之后执行一个函数. $(document).onload(fun ...

  4. SSL Certificate Signed Using Weak Hashing Algorithm 和SSL Medium Strength Cipher Suites Supported的解决方案

    这两天有个项目被扫描器报了几个中危,都是SSL证书的问题.记录一下解决方案吧. 第一个问题:SSL Certificate Signed Using Weak Hashing Algorithm 这里 ...

  5. jquery 蔚蓝网

    $(document).ready(function(){ //提交表单 $("#registerBtn").click(function(){ var email=documen ...

  6. mnist的格式说明,以及在python3.x和python 2.x读取mnist数据集的不同

    有一个关于mnist的一个事例可以参考,我觉得写的很好:http://www.cnblogs.com/x1957/archive/2012/06/02/2531503.html #!/usr/bin/ ...

  7. C++——list中erase和remove的区别

    1.之前在做相关的操作的时候,涉及到清除list相关的元素,因此会用到erase和remove,那么二者有什么区别呢? 从官方文档中,我们可以获取以下信息 erase : 说明:Removes fro ...

  8. docker-compose up使用自定义的网段的两种方式(从其根源指定)

    问题描述         还是那个研究安全大业的同事,在部署他的秘密武器,是用docker-compose部署的,有差不多20多个docker-compose.yml文件,然后由于docker-com ...

  9. 解决STM32 I2C接口死锁在BUSY状态的方法讨论

    关于STM32的I2C接口死锁在BUSY状态无法恢复的现象,网上已有很多讨论,看早几年比较老的贴子,有人提到复位MCU也无法恢复.只有断电才行的状况,那可是相当严重的问题.类似复位也无法恢复的情况是存 ...

  10. 生成用于ROM初始化的coe文件---使用matlab

    生成用于ROM初始化的coe文件---使用matlab t=0:2*pi/2^12:2*pi; y=0.5*sin(t)+0.5; r=ceil(y*(2^8-1)); fid = fopen('si ...