async与await的默契搭配

回调地狱解决历程

缘由

在页面中进行数据请求时，当存在ajax数据请求条件，像是下拉刷新，上拉刷新等。在进行ajax数据请求②的过程中，当ajax数据①请求结束后才执行②数据请求条件要求。

嵌套

原始解决嵌套条件数据请求

存在的问题
1、嵌套函数存在耦合性，一旦有所改动，就会牵一发而动全身
2、嵌套函数一多，就很难处理错误
3、回调函数还存在着别的几个缺点，比如不能使用try catch捕获错误，不能直接return。

$.ajax({  //数据请求①
      url: '地址1',
      method: 'get',
      success: function(data){
        console.log('请求①执行')
        $.ajax({  //数据请求②
          url: '地址2',
          method: 'get',
          success: function(data){
            console.log('请求②执行')
          }
        })
      }
    })

promise方式解决条件数据请求

存在问题
1、书写代码的方式，明显的表示异步操作
2、当存在多个参数传递时，比较复杂，易出错，像是：
Promise.then((①，②，③，④)=>{first(①，②，③，④)})
.then((①，②，③，④)=>{first(①，②，③，④)})

function first(m){
      return new Promise(function(resolve, reject){
        $.ajax({
          url: '地址',
          method: 'get',
          success: function(data){
            if(data.status === 200){ //当该条件成立，执行后面数据请求
              console.log(m+10)
              resolve(m+10) 
            } else{   //当该条件成立，终止接下来数据请求
              reject('error  m')
            }
          }
        })
      })
    }
    first(10).then(function(m){first(m)}).catch(function(z){ //如果完成链式编程没有出错输出20、30
      console.log(z) //如果first第一次执行结果为reject输出error 10
    })               //如果first第二次执行结果为reject输出20、 error  20

async&await解决条件数据请求

优点
1、同步代码的写法
2、当需要多数据传参时，不易出错

function first(m){
      return new Promise(function(resolve, reject){
        $.ajax({
          url: '地址',
          method: 'get',
          success: function(data){
            if(data.status === 200){ //当该条件成立，执行后面数据请求
              resolve(m+10) 
            } else{   //当该条件成立，终止接下来数据请求
              reject('error  m')
            }
          }
        })
      })
    }
    async function second(I){
      var x = await first(I)
      var y = await first(x)
      console.log(y)
    }
    second(10)