Ajax请求回调地狱及解决方案（promiseasync和await）

Posted 2021-04-15 Life and Program

谈及回调地狱发生得情况和解决办法，就必须追溯到原生ajax请求。

// 服务器端接口

app.get('/data1', (req, res) => {

  res.send('hi')

})

app.get('/data2', (req, res) => {

  res.send('hello')

})

app.get('/data3', (req, res) => {

  res.send('nihao')

})

 

// 启动监听

app.listen(3000, () => {

  console.log('running...')

})

原生ajax请求步骤

var xhr = new XMLHttpRequest();

xhr.open('get','http://localhost:3000/data1');

xhr.send(null);

xhr.onreadystatechange = function() {

    if(xhr.readyState == 4 && xhr.status == 200) {

        // 获取后台数据

        var ret = xhr.responseText;

        console.log(ret)

    }

}

又因为发送请求的以上代码需要经过反复复用，我们就需要将它封装为函数，以减少代码的冗余度。下面请看两个封装方法（都是错误的封装）：

　　错误封装1：发生错误的原因是queryData函数本身没有返回值，会默认返回undefined，return ret是写在queryData的内层函数中的。

function queryData(path) {

    var xhr = new XMLHttpRequest();

    xhr.open('get','http://localhost:3000/'+path);

    xhr.send(null);

    xhr.onreadystatechange = function() {

        if(xhr.readyState == 4 && xhr.status == 200) {

            // 获取后台数据

            let ret = xhr.responseText;

            return ret;

        }

    }

}

 

let res = queryData(‘data1’);

console.log(res);　　// 结果为：undefined

        这样很容易就让我们想到另一种封装方法——把ret在外层函数中返回。然而这就产生了另一种错误的封装效果。

        错误封装2：这种情况下发生错误的原因是ajax请求时异步的，数据ret还没有修改成功时，就已经执行了queryData函数的return代码。这时ret的值并没有被修改，当然还是null。

        要想执行异步操作代码的返回内容，就需要使用回调函数，下面介绍一种正确的封装方法：

function queryData(path, callback) {

  var xhr = new XMLHttpRequest();

  xhr.open('get','http://localhost:3000/' + path);

  xhr.send(null);

  xhr.onreadystatechange = function() {

    if(xhr.readyState == 4 && xhr.status == 200) {

      // 获取后台数据

      var ret = xhr.responseText;

      callback(ret);

    }

  }

}

 

queryData('data1',function(ret) {

  console.log(ret)    // 结果为：hi

})

        但是，如果想要按顺序获取接口'data1'、'data2'、'data3'中的数据，就会进行下面的操作，也就造成了回调地狱的问题。

queryData('data1', function(ret) {

  console.log(ret)　　　// 按顺序第一个输出为：hi

  queryData('data2', function(ret) {

    console.log(ret)　　//按顺序第二个输出为：hello

    queryData('data3', function(ret) {

      console.log(ret)　　// 按顺序第三个输出为：nihao

    });

  });

});

promise方式

为了改造上面的回调地狱问题，诞生了promise。promise其实就是一种语法糖（代码形式发生改变、但是功能不变）。

function queryData(path) {

  return new Promise(function(resolve, reject) {

    // 需要在这里处理异步任务

    var xhr = new XMLHttpRequest();

    xhr.open('get','http://localhost:3000/' + path);

    xhr.send(null);

    xhr.onreadystatechange = function() {

      // 该函数何时触发？xhr.readyState状态发生变化时

      if(xhr.readyState != 4) return;

      if(xhr.readyState == 4 && xhr.status == 200) {

        // 获取后台数据

        var ret = xhr.responseText;

        // 成功的情况

        resolve(ret);

      } else {

        // 失败的情况

        reject('服务器错误');

      }

    }

  })

}

 

queryData('data1')

  .then(ret=>{

    console.log(ret)    // 按顺序第一个输出为：hi

    // 这里返回的是Promise实例对象，下一个then由该对象调用

    return queryData('data2');

  })

  .then(ret=>{

    console.log(ret);　　// 按顺序第二个输出为：hello

    return queryData('data3');

  })

  .then(ret=>{

    console.log(ret)　　// 按顺序第三个输出为：nihao

  })

        对于上面代码中使用.then调用的情况，有几点说明：

queryData('data1')

  .then(ret=>{

    console.log(ret)　　// 顺序输出第一个结果为：hi

    // 如果在then方法中没有返回Promise实例对象，那么下一个then由默认产生的Promise实例对象调用

  })

  .then(ret=>{

    console.log('-------------------' + ret)　　// 顺序输出第二个结果为：----------------------undefined

    // 如果在then中显式地返回一个具体数据，那么下一个then可以获取该数据

    return 456;

  })

    .then(ret=>{

    console.log('-------------------' + ret)　　// 顺序输出第三个结果为：----------------------456

  })

上面的代码第二个.then中return的是456，为什么能继续调用.then方法呢？

　　这是因为return 456 实际上可以理解为下面的三种表示方式：

// Promise.resolve的作用：就是把数据转化为Promise实例对象

 

// 方式一：

return Promise.resolve(456);

 

// 方式二：

return new Promise(function(resolve, reject) {

  resolve(99999);

})

 

// 方式三：

Promse.resolve = function(param) {

  return new Promise(function(resolve, reject) {

    resolve(param);

  })

}

return Promise.resolve(88888);

promise对象除了.then方法外还有两个方法可以通过 . 调用，其中.finally是ES7中新增的方法。

.catch(ret=>{

  // 发生错误时触发

  console.log('error')

})

.finally(ret=>{

  // 无论结果成功还是失败都触发：一般用于释放一些资源

  console.log('finally')

})

async和await

下面我们就提出解决回调地狱最好的一种方法，通过使用 async 和 await 。

function queryData(path) {

  return new Promise(function(resolve, reject) {

    // 需要在这里处理异步任务

    var xhr = new XMLHttpRequest();

    xhr.open('get','http://localhost:3000/' + path);

    xhr.send(null);

    xhr.onreadystatechange = function() {

      // 当readyState值不为0的时候直接返回

      if(xhr.readyState != 4) return;

      if(xhr.readyState == 4 && xhr.status == 200) {

        // 获取后台数据

        var ret = xhr.responseText;

        // 成功的情况

        resolve(ret);

      } else {

        // 失败的情况

        reject('服务器错误');

      }

    }

  })

}

 

async function getAllData() {

  // await执行流程是顺序执行

  let ret1 = await queryData('data1');

  let ret2 = await queryData('data2');

  let ret3 = await queryData('data3');

  console.log(ret1)

  console.log(ret2)

  console.log(ret3)

}

getAllData();

另外，有一点需要提起注意：async函数的返回值是Promise实例对象

async function getAllData() {

  // await执行流程是顺序执行

  let ret1 = await queryData('data1');

  return 'hello';

}

var ret = getAllData();

console.log(ret)　　// 这里输出一个promise对象，并且resolve的数据为hello

ret.then(res=>{

  console.log(res)　　// 这里输出结果为：hello

})