js 新語法 async await的使用


隨着es6的更新與普及新的語法又在es7、es8中推廣與更進一步;

es5的同步處理請求的方式:

server.getUser().then((res) => {
					
	if (res.status == 'success') {
		console.log('請求成功')
    		getAddress(res.model.id) //成功后再繼續發下一個請求	
	} else {
              console.log('請求失敗')
        }
})

function getAddress(userid){
     server.getAddress({id:userid}).then((res) => {
					
	if (res.status == 'success') {
		console.log('請求成功')
    		//處理邏輯		
	} else {
              console.log('請求失敗')
        }
  })
}

  點評:此處至少有兩個問題

              1.代碼沒有加異常處理,如果接口返回失敗或代碼質量報錯,會造成代碼阻塞卡死應用;

              2.嵌套發請求太落后已不適應當前前端的發展,造成可讀性差;

     修改一下用es6 的async awiat

  

try{
    let user =awiat getUser();
    if(user){
         let address = awiat getAddress(user.id)
         //處理邏輯
    }
}catch(e){
    console.error(e)
}
//...省略代碼   上面兩個方法報錯不會阻塞后面代碼的執行

//封裝兩個請求方法
async function getUser(){
     let data = '';
     return new Promise(async (resolve, reject) => {
          try{ //加異常處理
                data =await server.getUser();
                if(data.status=='success'){
                    return resolve(data)
                }else{
                   return resolve('')
                }
          }catch(e){
               reject(e)
          }
    })
}    

async function getAddress(id){
     let data = '';
     return new Promise(async (resolve, reject) => {
          try{ //加異常處理
                data =await server.getAddress({id:id});
                if(data.status=='success'){
                    return resolve(data)
                }else{
                   return resolve('')
                }
          }catch(e){
               reject(e)
          }
    })
} 

  

  


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM