利用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. 作业二:构建swap函数

    一.swap代码 #include<stdio.h> int main() //主函数部分 { void swap(int *m,int *n); int a,b; int *p1,*p2 ...

  2. SpringCloud基于消息总线的配置中心

    @https://www.cnblogs.com/ityouknow/p/6931958.html Spring Cloud Bus Spring cloud bus通过轻量消息代理连接各个分布的节点 ...

  3. Linux第五节课学习笔记

    Linux系统中的一切都是文件,命令就是命令文件. 命令执行分为4步: 1.路径+命令名称. 2.别名.可用alias命令创建别名. 3.内部命令. 4.外部命令.99%的情况都属于第四种.定义这些路 ...

  4. 汇编实验2(又是作业emm)

    实验任务:学会使用debug 1.使用Debug,将程序段写入内存: 首先对0021:0000~0021:000F的内存赋值 这里我赋的值是 11 12 13 14 15 16 17 18 输入mov ...

  5. 关于使用jQuery操作dom时的一点发现

    <body> <ul> <li>list item 1</li> <li>list item 2</li> <li> ...

  6. 名字top500字典 各种格式及python脚本

    原文件名字top500 链接: https://pan.baidu.com/s/1cv0jPYb1-EBceoZz3QNvgg 密码: bat5 中文名字 链接: https://pan.baidu. ...

  7. sql注入-输入’or 1=1#

    比如:在用户名输入框中输入:’or 1=1#,密码随便输入,这时候的合成后的SQL查询语句为:     select * from users where username='' or 1=1#' a ...

  8. c# 中 利用 CookieContainer 对 Cookie 进行序列化和反序列化校验

    private void Form1_Load(object sender, EventArgs e) { var cookieStr = @".CNBlogsCookie=1BE76122 ...

  9. 思科模拟器-DHCP配置

    一.如图做好以下拓扑图(下图我取消显示端口号) 二.配置最下面的四台上网终端为自动获取ip 三.配置中间的二层交换机:添加vlan,同时所有端口设为access类型并将其加入vlan中,以下以swit ...

  10. DevExpress 控件汉化代码和使用方法

    DevExpress 第三方控件汉化的全部代码和使用方法   DevExpress.XtraEditors.Controls  此控件包中包含的控件最多,包括文本框,下拉列表,按钮,等等        ...