• 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)
              }
        })
    } 
    

      

      

  • 相关阅读:
    SASS教程sass超详细教程
    浅谈angular2+ionic2
    深入理解JSON对象
    浅谈闭包
    响应式开发入门
    CSS之float属性归纳探讨
    新学期加油
    Good moring!
    async await的前世今生
    ASP.NET配置KindEditor文本编辑器-图文实例
  • 原文地址:https://www.cnblogs.com/suzhen-2012/p/10105557.html
Copyright © 2020-2023  润新知