同步:一定要等任务执行完了
同步:必然要等任务执行完了,得到功效,才执行下一个任务。
异步:不等任务执行完,直接执行下一个任务。
为什么要用promise?
Promise的呈现主要是解决地狱回调的问题,好比你需要功效需要请求很多个接口,这些接口的参数需要此外阿谁的接口返回的数据作为依赖,这样就需要我们一层嵌套一层,但是有了Promise 我们就无需嵌套
Promise的素质就是疏散了异步数据获取和业务逻辑
所有代码
Promise/A+规范
$.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(‘‘,{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);}//掉败就挪用这个函数
)
})
温馨提示: 本文由Jm博客推荐,转载请保留链接: https://www.jmwww.net/file/web/31514.html