axios 与 ajax

Posted 2021-09-10 freeman_Tian

原生Ajax和axios的区别，Ajax怎么发送http请求的？
原生Ajax是根据 XMLHttpRequest发HTTP请求，而axios是根据Ajax进行封装的插件，其内部利用Promise实现，很好的解决的异步请求回调地狱的问题。

后者的问题其实就是问Ajax发送请求的五个步骤，

1. new XMLHttpRequest
2. 设置回调函数xhr.onreadystatechange = callback
3. 使用open方法与服务器建立连接
4. 向服务器发送数据
5. 在回调函数中针对不同的响应状态进行处理

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

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
  queryData(\'data2\', function(ret) {
    console.log(ret)　　//按顺序第二个输出为：hello
    queryData(\'data3\', function(ret) {
      console.log(ret)　　// 按顺序第三个输出为：nihao
    });
  });
});

为了改造上面的回调地狱问题，诞生了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
  })
  
  .finally(ret=>{
  // 无论结果成功还是失败都触发：一般用于释放一些资源
  console.log(\'finally\')
})

解决回调地狱最好的一种方法，通过使用 async 和 await 。

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

async函数的返回值是Promise实例对象