Ajax、Axios、Fetch三者的区别

袁志蒙 1321次浏览

摘要:Ajax、Axios、Fetch都用于发送网络请求的,那他们有什么区别呢?1.Ajax 它的全称是:Asynchronous JavaScript And XML,翻译过来就是“异步的 Javascript 和 XML”...

Ajax、Axios、Fetch都用于发送网络请求的,那他们有什么区别呢?

1.Ajax

它的全称是:Asynchronous JavaScript And XML,翻译过来就是“异步的 Javascript 和 XML”。很多小伙伴可能会误以为 Ajax 是发请求的一种方式,或者把 XMLHttpRequest 与 Ajax 划等号,其实这是错误和片面的。

正解:

Ajax 是一个技术统称,是一个概念模型,它囊括了很多技术,并不特指某一技术,它很重要的特性之一就是让页面实现局部刷新。

特点:

局部刷新页面,无需重载整个页面。


简单来说,Ajax 是一种思想,XMLHttpRequest 只是实现 Ajax 的一种方式。其中 XMLHttpRequest 模块就是实现 Ajax的一种很好的方式,这也是很多面试官喜欢让面试者手撕的代码之一。

利用 XMLHttpRequest 模块实现 Ajax:

<body>
  <script>
    function ajax(url) {
      const xhr = new XMLHttpRequest();
      xhr.open("get", url, false);
      xhr.onreadystatechange = function () {
        // 异步回调函数
        if (xhr.readyState === 4) {
          if (xhr.status === 200) {
            console.info("响应结果", xhr.response)
          }
        }
      }
      xhr.send(null);
    }
    ajax('https://www.yzmcms.com')
  </script>
</body>

2.Axios

Axios 是随着 Vue 的兴起而被广泛使用的,目前来说,绝大多数的 Vue 项目中的网络请求都是利用 Axios 发起的。当然它并不是一个思想,或者一个原生 API,它是一个封装库。

正解:

Axios 是一个基于 promise 封装的网络请求库,它是基于 XHR 进行二次封装。

特点:

从浏览器中创建 XMLHttpRequests

从 node.js 创建 http 请求

支持 Promise API

拦截请求和响应

转换请求数据和响应数据

取消请求

自动转换 JSON 数据

客户端支持防御 XSRF


所以说,Axios 可以说是 XHR 的一个子集,而 XHR 又是 Ajax 的一个子集。既然说它是一个库,那么我们在使用的时候就需要引入它。

示例代码:

// 发送 POST 请求
axios({
    method: 'post',
    url: 'https://www.yzmcms.com',
    data: {
        username: 'yzmcms',
        password: 'yzmcms'
    }
})

3.Fetch

Fetch 是在 ES6 出现的,它使用了 ES6 提出的 promise 对象。它是 XMLHttpRequest 的替代品。

很多小伙伴会把它与 Ajax 作比较,其实这是不对的,我们通常所说的 Ajax 是指使用 XMLHttpRequest 实现的 Ajax,所以真正应该和 XMLHttpRequest 作比较。

正解:

Fetch 是一个 API,它是真实存在的,它是基于 promise 的。

特点:

使用 promise,不使用回调函数。

采用模块化设计,比如 rep、res 等对象分散开来,比较友好。

通过数据流对象处理数据,可以提高网站性能。


所以这里就和 Ajax 又很大不同了,一个是思想,一个是真实存在的 API,不过它们都是用来给网络请求服务的,我们一起来看看利用 Fetch 实现网络请求。

示例代码:

<body>
  <script>
    function ajaxFetch(url) {
      fetch(url).then(res => res.json()).then(data => {
        console.info(data)
      })
    }
    ajaxFetch('https://www.yzmcms.com')
  </script>
</body>


总结:

Ajax是一种技术统称,主要利用XHR实现网络请求,Fetch是浏览器自带的 API,基于promise,可实现网络请求,Axios一个封装库,本质上也是对原生XHR的封装,只不过它是Promise的实现版本,符合最新的ES规范。


随机内容

表情

共0条评论
  • 这篇文章还没有收到评论,赶紧来抢沙发吧~