js 新语法 async await的使用

Posted 苏氏之道

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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)
          }
    })
} 

  

  

以上是关于js 新语法 async await的使用的主要内容,如果未能解决你的问题,请参考以下文章

Swift新async/await并发中利用Task防止指定代码片段执行的数据竞争(Data Race)问题

Swift新async/await并发中利用Task防止指定代码片段执行的数据竞争(Data Race)问题

node.js async/await 与 MySQL 一起使用

JS255- 如何在 JS 循环中正确使用 async 与 await

js异步回调Async/Await与Promise区别 新学习使用Async/Await

js异步回调Async/Await与Promise区别