掌握XHR,Ajax,Axios,fetch,vue-resource的相同和不同点

Cosolar
417 阅读3分钟

XHR、ajax、axios、fetch和vue-resource都是用于实现前端页面与后端接口进行数据交互的库或工具。它们在实现的方式、特点和适用场景上存在相同和不同之处。

1. XHR（XMLHttpRequest）

XHR是一种在不重新加载整个页面的情况下更新页面的技术。XHR最初由微软公司开发，创建XHR对象后，可以调用open()方法和send()方法，向服务器发送请求后，获得响应数据，并将其显示在页面中。XHR的传输方式可以是同步或异步，使用XHR可以实现XHR自动加载文件，而不必手动刷新页面。XHR的优点是可以更好地控制请求过程，以及更好地处理返回结果，但缺点是代码量高、复杂度高，需要自己进行封装等。如下为XHR的代码示例：

var xhr = new XMLHttpRequest();  
xhr.open('get', '/user?id=123', true);  
xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');  
xhr.onreadystatechange = function(){  
    if (xhr.readyState == 4 && xhr.status == 200 || xhr.status == 304) {  
        console.log(xhr.responseText);  
    }  
};  
xhr.send();

2. Ajax

Ajax（Asynchronous JavaScript and XML）即异步 JavaScript 和 XML 技术，是一种在不重新加载整个页面的情况下更新页面内容的技术。它通过 Ajax 异步请求获取数据，回调函数获取响应数据后，局部刷新页面内容，而不必刷新整个页面。与 XHR 相比， Ajax 更为简单、易用和灵活，但它也存在一些缺点，如兼容性问题等。如下为使用Ajax获取数据的示例：

var xmlhttp = new XMLHttpRequest();

xmlhttp.onreadystatechange=function(){
    if(xmlhttp.readyState==4 && xmlhttp.status==200){
        document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
    }
}

xmlhttp.open("GET","demo_get.asp",true);
xmlhttp.send();

3. axios

axios是一个基于Promise的HTTP库，可以用在浏览器和Node.js中。它可以拦截请求或者响应，并进行相应数据的处理。axios的优点在于支持Promise，让异步的操作更加方便、简洁，并且可以进行拦截器的设置等。以下是axios进行GET请求的示例：

import axios from 'axios';

axios.get('/user?id=123').then(function (response) {
  console.log(response);
}).catch(function (error) {
  console.log(error);
});

4. fetch

fetch 是一个基于 Promise 设计的 AJAX 方法，可以替换原生 XHR 和 jQuery 的 ajax 方法。相比XMLHttpRequest对象，fetch更为简单易用，但支持程度不够好。fetch默认是不支持发cookie的，需要手动开启fetch来支持cookie。以下是fetch的GET请求示例：

fetch('/user?id=123', {
  method: 'GET',
  headers: {
    'Content-Type': 'application/x-www-form-urlencoded'
  }
}).then(function (response) {
  console.log(response);
}).catch(function (error) {
  console.log(error);
});

5. vue-resource

vue-resource是Vue.js团队开发的一个插件，主要用于处理AJAX请求和RESTful API，提供了方便的API来进行数据的获取、过滤、序列化以及请求的组织。虽然功能相对比较简单，但速度较快，并且易于使用。以下是vue-resource的GET请求示例：

this.$http.get('/user?id=123').then(function (response) {
  console.log(response.body);
}, function (error) {
  console.log(error.statusText);
});

综上所述，XHR、Ajax、axios、fetch和vue-resource各有优缺点，但都可以处理前端页面与后端接口之间的数据交互。具体使用哪种方式，应根据实际场景和需求进行选择。

avatar
文章
阅读
粉丝