解释下XHR,ajax,axios,fetch,vue-resource的相同和不同有哪些？

5 min read

XHR，ajax，axios，fetch和vue-resource都属于前端处理HTTP请求的工具，主要用于客户端向服务器端发送异步请求。其相同之处在于都能够发送HTTP请求，并能够接收服务器返回的响应数据。但它们之间也有一些不同点：

  1. XMLHttpRequest（XHR）：通过原生的XMLHttpRequest对象实现异步请求。

  2. Ajax（Asynchronous JavaScript and XML）：Ajax在XHR的基础上，引入了前端能力不断提升，现在有很多框架支持了XMLHttpRequest，所以现在Ajax的含义已经扩展到了以AJAX技术为核心的WEB应用。

  3. Axios：是一个基于promise的HTTP库，在浏览器和node.js中发送HTTP请求，可以同时处理浏览器和node.js的请求。相比XHR和fetch，Axios提供了更多易于使用的功能，例如请求和响应的拦截器，请求的取消，Global API等。

  4. Fetch：是ES6中的新特性，是一种低级的HTTP请求API。它的设计目标是比XHR更加简单，并且更加底层，提供的API相比XHR更少。Fetch主要缺点是在传输链路出错时有一些奇怪的行为，Fetch 对象所产生的任何异常都只会是 Promise 中的 reject，没有 HTTP 状态码，而且 fetch 也不会显示一个传输网络错误。

  5. Vue-resource：Vue-resource 是Vue.js官方提供的一个插件，它提供了一些便捷的API，能够轻松发送各种类型的 HTTP 请求。Vue-resource 主要优点在于它能很大程度的结合 Vue.js，支持Vue.js的数据双向绑定和拦截器等特性。

以上是XHR、Ajax、Axios、Fetch和Vue-resource的相同和不同之处，选择使用哪种工具主要根据实际需求、个人习惯和技术栈来决定。