题目:
请使用Promise封装Ajax操作 原始的Ajax操作如下:
var onSuccess = function(result){}; //成功的回调
var onFail = function(error){}; //失败的回调
var xhr = new XMLHttpRequest();
xhr.open("POST", "www.baidu.com", true);
xhr.onload = function(){
if(xhr.readyState === 4 && xhr.status === 200){
onSuccess(xhr.response);
} else {
onFail(xhr.statusText);
}
}
xhr.onerror = function(){
onFail(Error("网络异常"));
}
答案:
const promise = new promise((resove,reject)=>{
var xhr = new XMLTttpRequest();
xhr.open("post","http://www.baidu.com",true);
xhr.onload = function(){
if(xhr.readyState === 4 && xhr.status === 200){
onSuccess(xhr.response);
} else {
onFail(xhr.statusText);
}
}
xhr.onerror = function(){
onFail(Error("网络异常"));
})
Ajax相关知识点:
Ajax是一种创建交互式网页应用的网页开发技术,目的在于无须重新加载整个网页的情况下更新部分网页,做到局部刷新的作用。Ajax的一种典型应用就是网页搜索提示。
XMLHttpRequest对象常用属性:
(1)onreadystatechange:用于设置事件处理函数;
(2)readystate:用于返回Ajax请求的处理状态,readystate属性共有5种取值:
- 0:请求未初始化
- 1:服务器连接建立;
- 2:请求已接收
- 3:请求处理种
- 4:请求已完成,且响应已就绪
(3)status:用于返回服务器处理HTTP状态码;
(4)responseText和responseXML:用于获取服务器对HTTP请求的响应内容。如果响应内容是普通文本字符串则是第一个,如果是XML格式的则为第二个。
关于Ajax的知识可参考我之前一篇博文,接下来说说Promise相关内容。
Promise相关知识点:
主要解决异步深层嵌套的问题,它提供了简洁的API使得异步操作更加容易。
promise的使用:
使用new来构造const promise = new Promise()
,Promise的构造函数接收一个参数是函数,并传入两个参数:resove
和reject
,分别表示异步操作执行成功和失败后的回调函数。
//Promise实例
var p = new Promise(function(resove,reject){
//实现异步任务
setTimeout(function(){
var flag = false;
if(flag){
resove('hello')
}else{
reject('出错了!')
}
},1000)
})
Promise实例生成后使用实例方法,但想要实现链式编程需要return
。
基于Promise发送Ajax请求:
//封装一个Promise函数
function queryData (url){
//创建一个Promise实例
var p = new Promise(function(resove,reject){
var xhr = XMLHttpRequest();
xhr.onreadystatechange = function(){
if(xhr.readystate !== 4) return;
if(xhr.readystate == 4&&xhr.status==200) {
//处理正常情况
resove('xhr.responseText');
}else{
//处理异常情况
reject('服务器错误');
}
}
xhr.open('get',url);
xhr.send();
})
return p;
}
//用实例方法调用封装函数
queryData('http://localhost:3000/data')
.then(function(data){
console.log(data);
//想要使用链式编程需要return返回,并且返回的数据将是下一次then方法参数函数的data参数
return queryData('http://localhost:3000/data1')
})
.then(function(data){
console.log(data);
})
注意:对于then()的参数中的函数返回值,如果返回的是Promise对象,则会调用下一个then(),如果是返回的普通值,会直接传递给下一个then(),通过它的参数函数的参数来接收。
Promise常用实例方法:
(1)then(),用于得到正确的返回结果
(2)catch(),获取异常信息,具体用法与上面代码中then()方法一致。