前端ajax、axios、fetch他们的用法及区别

Ajax、Axios和Fetch都是用于在浏览器端发送HTTP请求的JavaScript库。

Ajax

Ajax（Asynchronous JavaScript and XML）是一种基于XMLHttpRequest对象实现异步数据交换的技术。通过Ajax，可以在不刷新页面的情况下向服务器发起请求，获取数据并更新页面内容。常见的使用方式为：

var xhr = new XMLHttpRequest();
xhr.open('GET', '/api/data');
xhr.onload = function() {
    
    
  if (xhr.status === 200) {
    
    
    console.log(xhr.responseText);
  } else {
    
    
    console.log('Request failed.  Returned status of ' + xhr.status);
  }
};
xhr.send();

其中，open()方法用于指定请求方法、URL和是否异步；onload事件处理函数在请求完成后被调用；send()方法用于发送请求。

Axios

Axios是一个基于Promise的HTTP客户端，它支持浏览器和Node.js平台。相比于原生的XHR对象，Axios提供了更友好的API和更多的功能特性，如拦截器、取消请求、自动转换JSON数据等。使用Axios发送GET请求的示例代码：

axios.get('/api/data')
  .then(function (response) {
    
    
    console.log(response.data);
  })
  .catch(function (error) {
    
    
    console.log(error);
  });

Axios还支持其他请求方法，如POST、PUT、DELETE等。可以使用axios.create()方法创建一个自定义实例，并设置全局配置选项，如请求超时时间、默认请求头等。

Fetch

Fetch是JavaScript原生提供的一种用于发送HTTP请求的API，它基于Promise实现，比XHR更加现代化和简洁。Fetch API定义了全局的fetch()方法，可以接受一个URL参数和一个可选的配置对象参数。使用Fetch发送GET请求的示例代码：

fetch('/api/data')
  .then(function(response) {
    
    
    if (!response.ok) {
    
    
      throw new Error('Network response was not ok');
    }
    return response.json();
  })
  .then(function(data) {
    
    
    console.log(data);
  })
  .catch(function(error) {
    
    
    console.log('There has been a problem with your fetch operation: ', error);
  });

其中，第一个.then()方法用于检查响应是否成功，如果不成功则抛出异常；第二个.then()方法用于解析JSON格式的响应数据。

虽然Fetch看起来比XHR更加现代化和简洁，但它还有一些缺点，如不支持取消请求、没有内置的超时处理等。因此，在实际开发中，我们可能需要借助第三方库或自己封装一些工具函数来增强Fetch的功能。