async/await 异步处理

业务需求：就是首先先进行一个ajax请求，然后再进行下一个ajax请求，而下一个请求需要使用上一个请求得到的数据，这样一层层嵌套很繁琐。
使用async 、await 异步处理这种问题会使代码很优美

先上一段代码：
需求：test1方法执行后再执行test2方法
普通方法

function test1(params){
    return new Promise((resolve,reject)=>{
        setTimeout(()=>{
            if (params >1) {
                resolve('test1 resolve')
            }else{
                 reject('test1 reject')
            }
        },2000)
    })
}
function test2(){
    console.log('test2')
}
function get(params){
    test1(params).then(res=>{
      console.log(res)
      test2()
    })
}
get(2)

返回 image.png

重点来了：使用async、await 异步处理

function test1(params){
    return new Promise((resolve,reject)=>{
        setTimeout(()=>{
            if (params >1) {
                resolve('test1 resolve')
            }else{
                 reject('test1 reject')
            }
        },2000)
    })
}
function test2(){
    console.log('test3')
}
async function get(params){ // 方法前加关键字 async 异步
    await test1(params).then(res=>{console.log(res)}) // 加await 等待此方法请求成功后 再执行下一段代码
    test2()
    
}
get(2)

返回 image.png

若不加关键字async和await则执行顺序不如人意（有变）

function test1(params){
    return new Promise((resolve,reject)=>{
        setTimeout(()=>{
            if (params >1) {
                resolve('test1 resolve')
            }else{
                 reject('test1 reject')
            }
        },2000)
    })
}
function test2(){
    console.log('test2')
}
function get(params){
    test1(params).then(res=>{console.log(res)})
    test2()
}
get(2)

返回 image.png

借用例子：

  function getCode(){
      return axios.get('json/code.json');
  }
   function getlist(params){
      return axios.get('json/person.json',{params})
    }
          function getFinal() {
              getCode().then(function(res) {
                if (res.data.code == 0) {
                  var params = {
                    code: res.data.code
                  }
                  getlist(params).then(function(res) {
                    if (res.data.code == 0) {
                      console.log(res.data.list)
                    }
                  })
                }
              })
            }
            getFinal()

          // 改用async异步处理
          async function getResult() {
              try {
                const code = await getCode()
                if (code.data.code == 0) {
                  var params = {
                    code: code.data.code
                  }
                  const list = await getlist(params)
                  console.log(list.data.list)
                }
              } catch (err) {
                console.log(err)
              }
            }
            getResult()