博客

AJAX原理以及axios、fetch区别实例详解

  • Post category:http

下面就是AJAX原理以及axios、fetch区别的详解攻略。

AJAX原理

AJAX全称Asynchronous JavaScript And XML(异步JavaScript和XML)，它是一个利用JavaScript和XML(也可以使用JSON)实现异步通信的技术。AJAX可以通过XmlHttpRequest对象向服务器请求数据，并在不刷新整个页面的情况下，在页面的某个区域中显示此数据。其原理是通过浏览器内核提供的XMLHttpRequest对象发起异步请求，获取到数据后通过JavaScript来更新页面。

AJAX示例

HTML：

<button id="btn">请求数据</button>
<div id="content"></div>

JavaScript：

const xhr = new XMLHttpRequest();
const btn = document.getElementById('btn');
const content = document.getElementById('content');
btn.onclick = function() {
  xhr.open('GET', '/api/data', true);
  xhr.onreadystatechange = function() {
    if (xhr.readyState === 4) {
      if (xhr.status === 200) {
        content.innerHTML = xhr.responseText;
      } else {
        content.innerHTML = '请求失败';
      }
    }
  };
  xhr.send(null);
};

axios

axios是一个基于Promise的HTTP客户端，它可以用于浏览器和Node.js。它能够自动转换JSON数据，支持请求和响应拦截器，可以轻松地取消请求等。在使用axios时，我们只需要简单地构造一个请求对象，设置一些参数，即可发起网络请求。

axios示例

import axios from 'axios';
axios.get('/api/data')
  .then((response) => {
    console.log(response.data);
  })
  .catch((error) => {
    console.log(error);
  });

fetch

fetch是Web API中提供的一种新的网络请求方法，它相对于XMLHttpRequest来说更为先进。fetch默认使用Promise来进行异步操作，它的API设计中更加简洁清晰，而且支持跨域请求和请求和响应的拦截器等。但是在一些旧的浏览器上可能不支持fetch方法，因此我们需要使用类似polyfill的方式来兼容旧浏览器。fetch请求返回的是一个response对象，需要对response进行json()转换，才能获取到响应的数据。

fetch示例

fetch('/api/data')
  .then((response) => response.json())
  .then((data) => {
    console.log(data);
  })
  .catch((error) => {
    console.log(error);
  });

axios和fetch的区别

axios和fetch都是比XHR更现代的解决方案，它们各有优点。

  • axios在API设计中更加常规和清晰，支持更丰富的功能，例如请求和响应拦截器、自动转换JSON数据等，提供了更好的开发体验。而fetch的API设计更加简洁清晰，相对于XHR来说更加先进。

  • axios支持在浏览器和Node.js环境下使用，而fetch只支持在浏览器环境下使用。

  • 在请求的异常处理上，axios会自动捕获并返回错误信息，而fetch在出错时只是返回一个rejected状态的Promise，需要手动检查状态码等错误信息。

  • 在请求的取消处理上，axios提供了专门的CancelToken来解决请求的取消，而fetch只能通过AbortController(支持性不太好)来间接实现请求的取消。

综上所述，axios和fetch各有优劣，需要根据项目的具体情况来选择合适的工具。若需要自由灵活的控制请求和响应流程，以及更好的用户体验，可以考虑使用axios；若只是简单地实现RESTful API的请求和响应，fetch会更加轻量级和高效。

Tags: