利用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. dee

    窗口居中def center(self): screen = QDesktopWidget().screenGeometry() size = self.geometry() self.move((s ...

  2. Favorite Donut(HDU 5442)最小表示法+二分

    题目给出一个字符串,由a~z表示甜度,随字典序增大,字符串首尾相连形成一个圈,要求从一个位置开始字典序最大的字符串,输出位置以及是顺时针还是逆时针表示.顺时针用0表示,逆时针用1表示. 此题只需要查找 ...

  3. 关于pycharm中导入自己写的模块没有智能提示的解决办法

    在pycharm界面中右击py文件所在的文件夹,选择Make Directory as文件,选择其中一个即可

  4. wps excel

    ET.Application etApp;ET.workbook etbook;ET.Worksheet etsheet ;ET.Range etrange;//获取工作表表格etApp = new  ...

  5. golang 修改数组中结构体对象的值的坑

    对对象数组逐个修改元素属性时候没有成功,代码如下: for _, configure := range configures { configure.Price = specPriceMap[conf ...

  6. Python Faker的使用(1):基础使用方法与函数速查,生成随机数据

    在软件需求.开发.测试过程中,有时候需要使用一些测试数据,针对这种情况,我们一般要么使用已有的系统数据,要么需要手动制造一些数据. 在手动制造数据的过程中,可能需要花费大量精力和工作量,现在好了,有一 ...

  7. python 常用库

    Numpy, Pandas 数据处理 Scipy  科学计算 Matplotlib 可视化 Scikit Learn  机器学习 Keras 深度学习模型 jieba 分词 Gensim  主题(包含 ...

  8. 关于微信小程序获取二维码的踩坑记录

    1.踩坑需求:获取小程序的二维码 2.踩坑接口: https://api.weixin.qq.com/wxa/getwxacode?access_token=ACCESS_TOKEN3 踩坑代码 pu ...

  9. WinForm外包公司 WInform外包项目监控案例展示

    北京动点飞扬软件开发团队 C# WInform监控项目案例展示 长年承接WInForm C#项目开发,商业案例欢迎联系我们索取 有相关项目外包定制开发 欢迎联系我们 qq372900288 Tel 1 ...

  10. 深入理解 ORM框架

    1.ORM是什么? object Relational mapping 对象关系映射,是一种为了解决面向对象与关系型数据库存在不匹配现象的技术,简单说,orm通过描述对象和数据库之间映射的元数据,将程 ...