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 ...
随机推荐
- go chan 入门代码
package main import ( "fmt" "sync" "time" ) // 生产数据 func producer(num ...
- Request、Response
Request Request对象在我们写爬虫发送请求的时候调用,参数如下: url: 就是需要请求的url callback: 指定该请求返回的Response由那个函数来处理. method: 请 ...
- js··BOM 浏览器对象模型
1.window.open(url,ways) url 是打开的网页地址 ways 打开的方式 _self 2.window.close() 3.浏览器用户信息 Window.navigator 4. ...
- freemarker demo
<!--freemarker--> <dependency> <groupId>org.springframework.boot</groupId> & ...
- 对spring框架的理解
spring框架的两大核心理念就是IOC和AOP,在面试的时候经常会被问到你对spring的理解.下面大致的说一下我对spring的理解. 一.IoC 1.1.什么是IoC 众所周知,IoC就是控制反 ...
- 使用ghost装完系统后出现“引用了一个不可用的位置”
用GHOST版光盘安装完系统后,只有一个C盘,无法点桌面刷新,然后提示“D:/我的文档引用了一个不可用的位置.... 1.在管理员账户下定位到如下键值:“HKEY_CURRENT_USER\Softw ...
- python基础教程001_安装python
1.安装python Windows http://www.python.org下载python安装包 比如python-2.7.12.msi执行安装 安装完毕后,开始->搜索程序跟文件-> ...
- 旁路、去耦、Bulk以及耦合电容的作用与区别
在硬件设计中有很多种电容,各种电容的功能.种类和电容容值各不相同.按照功能划分的话,最重要的几种电容分别称为:去耦电容(De-coupling Capacitor),旁路电容(Bypass Capac ...
- 芯灵思Sinlinx A64开发板 Linux内核等待队列poll ---阻塞与非阻塞
开发平台 芯灵思Sinlinx A64 内存: 1GB 存储: 4GB 开发板详细参数 https://m.tb.cn/h.3wMaSKm 开发板交流群 641395230 阻塞:阻塞调用是指调用结果 ...
- req和resp常用的方法
req: 1. setAttribute()在Request域中存储数据 2. setCharacterEncoding()设置请求参数的编码方式,只对post请求有效 3. getMethod() ...