当前位置:首页 > Web开发 > 正文

同步:一定要等任务执行完了

2024-03-31 Web开发

  同步:必然要等任务执行完了,得到功效,才执行下一个任务。

  异步:不等任务执行完,直接执行下一个任务。

为什么要用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