利用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. Struts2 2.5版本的通配符和动态方法调用的问题

    Struts2.5版本之后,使用通配符的时候出现错误 配置的四个action,使用通配符和动态方法的时候找不到其中的update方法后来经过查找才知道原来是版本加了一个 <action name ...

  2. LeetCode 136. Single Number C++ 结题报告

    136. Single Number -- Easy 解答 相同的数,XOR 等于 0,所以,将所有的数字 XOR 就可以得到只出现一次的数 class Solution { public: int ...

  3. 学习笔记TF055:TensorFlow神经网络简单实现一元二次函数

    TensorFlow运行方式.加载数据.定义超参数,构建网络,训练模型,评估模型.预测. 构造一个满足一元二次函数y=ax^2+b原始数据,构建最简单神经网络,包含输入层.隐藏层.输出层.Tensor ...

  4. linux下用ctrl+r快速搜索history命令

    前提是,搜索已经使用的命令,否则是查不出来结果的. ctrl+r用途:反向搜索执行过的命令.(reverse-i-search) 1.任何目录下按住ctrl + r 2.输入历史命令中的字符串 ,比如 ...

  5. 巴黎游戏周: PS4独占游戏《重力少女2》

    http://blog.us.playstation.com/2015/10/27/gravity-rush-2-coming-to-north-america-on-ps4/

  6. 图片万能居中css

    .div{text-align:center;} .div img{vertical-align:middle;} .div:after{content:"";display:in ...

  7. 芯灵思Sinlinx A64 Linux&qt编译安装

    开发平台 芯灵思Sinlinx A64 内存: 1GB 存储: 4GB 详细参数 https://m.tb.cn/h.3wMaSKm 开发板交流群 641395230 前提条件搭建好CentOS环境 ...

  8. [R] Lexical & Dynamic Scoping / Execution & Calling environments / Closures

    Lexical Scoping :有Java繼承中呼叫子類時先生成父類的概念,呼叫函數後,系統會轉至其定義處,將其 environment 中所具有的東西(有些可能定義在外層)形成 Closure [ ...

  9. centos7 升级openssh到openssh-8.0p1版本

    环境介绍 centos7.3和centos7.6升级完毕测试登录ssh以及重启后登录ssh均无问题. 前期请自行配置好yum源(如果不会请百度) 整个过程不需要卸载原先的openssl包和openss ...

  10. SoapUI简介及下载地址

    SoapUI是一个开源测试工具,通过soap/http来检查.调用.实现Web Service的功能/负载/符合性测试.该工具既可作为一个单独的测试软件使用,也可利用插件集成到Eclipse,mave ...