Promise与AJAX结合写法

315 阅读1分钟

Promise使用的基本格式

//promise的使用
 function fn(){
     return new Promise((resolve, reject)=>{
         成功时调用 resolve(data)
         失败时调用 reject(err)
     })
 }
 fn().then((data)=>{}, fail)
 //..then()的第二个参数也可以写到.catch()里

AJAX

前端向后端发送请求需要用到AJAX或者相关库(如Axios),

//AJAX代码
 var request = new XMLHttpRequest()
 request.open('GET', 'url', true);
 request.onreadystatechange = function () {
   if(request.readyState === 4 && request.status === 200) {
     function(request.responseText){
     	//处理返回结果的code
     };
   }};
 request.send();

而这些请求操作都是异步操作,如果需求是在请求成功后再发送请求,则会出现多层嵌套,形成回调地狱,影响代码可读性。

此时使用Promise就可以大大理顺代码逻辑,增强代码可读性。

Promise结合AJAX

 function request(type,url,...params){
     return new Promise((resolve, reject)=>{
     
 		var request = new XMLHttpRequest()
 		request.open(type, 'url', true);
        
		 request.onreadystatechange = function () {
  		 if(request.readyState === 4 && request.status === 200) {
   		 	resolve(request.responseText)
   		}else{
        	reject(err)
        }
 		request.send();
   })
 }
 
 //promise请求的调用
 request(...params)
 	.then(data => {
    	
    })
    .catch(err => {
    
    })