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

　　谈及回调地狱发生得情况和解决办法，就必须追溯到原生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) {
    var xhr = new XMLHttpRequest()
    xhr.open('get', 'http://localhost:3000/'+path)
    xhr.send(null)
    var ret = null
    xhr.onreadystatechange = function() {
        if (xhr.readyState == 4 && xhr.status == 200) {
            // 获取后台数据
            ret = xhr.responseText
        }
    }
    return ret
}

let res = queryData('data1')
console.log(res)　　// 结果为：undefined

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

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

　　虽然使用了promise对象，但是一路通过 . 调用方法进行下去，代码的可读性较差。

 

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

转载于:https://www.cnblogs.com/belongs-to-qinghua/p/11161140.html