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 ...
随机推荐
- 输入框VS软键盘
最近在做一个h5的时候遇到的问题 我们都知道当页面上的有输入框被选中了,这个时候就回调出键盘用户可以输入.但是安卓手机在弹出键盘时页面的输入框也会被覆盖住: 以下为暂时的解决办法:(以下方法同时解决了 ...
- 关于使用deepin在linux下安装mysql出现Can't connect to local MySQL server through socket '/tmp/mysql/mysql.sock' (2)的解决方法
根据目录/etc/mysql打开文件debain.cnf 此时文本里的内容为 # Automatically generated for Debian scripts. DO NOT TOUCH![c ...
- React Native开发的一种代码规范:Eslint + FlowType
[这篇随笔记录的很简单,没有涉及具体的Eslint规则解释以及FlowType的类型说明和使用等,只是链接了所需的若干文档] js开发很舒服,但是代码一多起来就参差不齐,难以阅读了.所以加上一些代码规 ...
- 安装Mosquitto学习MOTT协议
1.源码的获取:http://mosquitto.org/files/source/ 2.直接解压tar文件,就可以得到所有的源码,里面有个配置文件config.mk,这个文件包含了Mosquitto ...
- JavaScript作用域(第七天)
我们都知道js代码是由自上而下的执行,但我们来看看下面的代码: test(); function test(){ console.log("hello world"); }; 如果 ...
- Java_02变量、数据类型和运算符
1.变量命名规则 变量必须以字母.下划线 " _ " 或 " $ " ( " ¥ " ) 符号开头. 变量可以包括数字,但不能以数字开头. ...
- Oracle的安装+PL安装+系统变量配好后重启
服务启动后的样子 第一步安装oracle服务 链接: https://pan.baidu.com/s/1sRu95Vy1arc3gfuH9nH5Wg 提取码: eaxx 复制这段内容后打开百度网盘手机 ...
- idea 启动项目提示 Command line is too long. Shorten command line for Application or also for Spring Boot default configuration.
在.idea 文件夹中打开workspace.xml文件找到<component name="PropertiesComponent">,在标签里加一行 <pr ...
- mongdb 报错“Cannot connect to the MongoDB at 192.179.1.6:27017. Error: Network is unreachable.”
1.命令行输入talnet 192.179.1.6 27017 看能拼通不 2.防火墙添加入站规则 27017 3.修改mongdb配置文件 mongodb.config dbpath=c:\Mon ...
- Schema、API Schema与MFn
大部分知识都是相通的,Maya和USD在设计上有很多相似之处,USD的Schema粗看很难理解,但实际上与Maya的MFn有着异曲同工之处.这篇文章会简单介绍一下这两个知识点,做个对比,了解下它们在各 ...