ES6之Promise封装ajax()
Posted 一只深海的蓝鲸
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了ES6之Promise封装ajax()相关的知识,希望对你有一定的参考价值。
什么是异步?
同步:一定要等任务执行完了,得到结果,才执行下一个任务。
异步:不等任务执行完,直接执行下一个任务。
为什么要用promise?
Promise的出现主要是解决地狱回调的问题,比如你需要结果需要请求很多个接口,这些接口的参数需要另外那个的接口返回的数据作为依赖,这样就需要我们一层嵌套一层,但是有了Promise 我们就无需嵌套
Promise的本质就是分离了异步数据获取和业务逻辑
$.Ajax()中的promise
如果不使用promise,$.ajax请求的时候成功和失败的回调函数是写在参数里的,他是对象参数的一个值
$.ajax({
method:"post",
url:"/xxx",
data:"username=mtt&password=1",
dataType:‘json‘,
success:()=>{}//成功后的回调函数
error:()=>{}//失败后的回调函数
}
)
如果使用jQuery.axja()发送请求,并使用promise,代码如下
let myButton = document.getElementById(‘myButton‘);
function success(responseText){
console.log("成功")
console.log(responseText);//responseTex
}
function fail(request){
console.log("失败")
console.log(request);
}
myButton.addEventListener("click",(e)=>{
//使用ajax
$.ajax({
method:"post",
url:"/xxx",
data:"username=mtt&password=1",
dataType:‘json‘//预期服务器返回的数据类型,如果不写,就是响应里设置的
}
).then(success,fail)//$.ajax()返回一个promise
})
$.ajax()
函数会返回一个promise,然后在后面.then(success,fail)
时候,如果成功了就会调用第一个参数里的函数即success函数,如果失败了就会调用第二个参数的函数即fail函数.
Promise的优点(1.语法上的简化):不用记住失败或者成功的函数名字.只需要知道成功是第一个参数,失败时第二个参数,比如:
//使用ajax
$.ajax({
method:"post",
url:"/xxx",
data:"username=mtt&password=1",
dataType:‘json‘//预期服务器返回的数据类型,如果不写,就是响应里设置的
}
).then((responseText)=>{console.log(responseText)},()=>{console.log("失败")})//$.ajax()返回一个promise,
Promise的优点(2.多次处理): .then(()=>{},()=>{})
$.ajax({
method:"post",
url:"/xxx",
data:"username=mtt&password=1",
dataType:‘json‘//预期服务器返回的数据类型,如果不写,就是响应里设置的
}
).then((responseText)=>{
console.log(responseText)
return responseText;//如果要对结果进行多次处理,就在这里return,第二次then就会得到这个return的数据
},()=>{
console.log("失败")
}).then(//开始第二次then
(上一次return的结果)=>{
console.log("第二次处理")
console.log(上一次return的结果)
},
()=>{
//第二次处理失败结果
}
)
封装一个类似$.Ajax()中的Promise的简易版本
let ajax=function(url, param, type = ‘POST‘){ return new Promise(function(resolve, reject){ $.ajax({ type: type, url: url, data: param, dataType: ‘json‘, success(res) { resolve(res) }, error(res) { reject(‘响应错误‘) // reject(res.statusText) } }) }) } // 使用示例 ajax(‘http://wh.xhd.cn/api/content/list.jspx‘,{channelIds: 1}).then(res=>{ console.log(res) })
///其他
//封装ajax
window.jQuery.ajax = ({method,path,body,headers})=>{//ES6语法
//进行Promise封装
return new Promise((resolve,reject)=>{//这句话是套路,记住
let request = new XMLHttpRequest();
request.open(method,path);//配置
for (const key in headers) {//遍历header,设置响应头
let value = headers[key];
request.setRequestHeader(key,value);
}
request.send(body);//发送,并配置响应体
request.onreadystatechange = ()=>{
if(request.readyState ===4){
if ( request.status>=200&&request.status<=400){
resolve.call(undefined,request.responseText);//执行成功函数
}else if(request.status>=400){
reject.call(undefined,request);//执行失败函数
}
}
}
})
}
//调用
myButton.addEventListener("click",(e)=>{ //使用ajax $.ajax({ method:"post", path:"/xxx", body:"username=mtt&password=1", headers:{ "content-type":‘application/x-www-form-urlencoded‘, "mataotao":18 } }).then( (responseText)=>{console.log(responseText);},//成功就调用这个函数 (request)=>{console.log(request);}//失败就调用这个函数 ) })
第一个要记住的:这个Promise
必须接收一个函数,函数里面就是要做的事情(即发送请求,Ajax请求),一般来说,把所有东西放在里面,第一句就是return
.然后要做的事情放在里面.
第二个要记住的:Promise接收的这个函数有两个参数,一个叫做resolve
.一个叫reject
前两个要记住的写出来就是
return new Promise((resolve, reject) => {
//要做的事
});
第三个要记住的:如果成功了就调一下resolve()
,如果失败了就调用reject()
,所以Ajax()
参数中不需要successFn
和failFn
了 并且将成功行和失败行对应的代码分别改为 resolve.call(undefined,request.responseText);//执行成功函数
和reject.call(undefined,request);//执行失败函数
上面是固定的套路
背下这个方法!!
function xxx(){
return new Promise((f1, f2) => {
doSomething()
setTimeout(()=>{
// 成功就调用 f1,失败就调用 f2
},3000)
})
}
xxx().then(success, fail)
// 链式操作
xxx().then(success, fail).then(success, fail)
以上是关于ES6之Promise封装ajax()的主要内容,如果未能解决你的问题,请参考以下文章