前端基础篇-深入了解 Ajax 、Axios

Ajax 和 Axios 都是用于浏览器与服务器通信的技术，但它们之间有一些关键的区别：

1. 创建方式：Ajax 是一种原生 JavaScript 技术，而 Axios 是一个基于 Promise 的 HTTP 客户端，用于浏览器和 node.js。
2. 使用复杂度：Ajax 相对较复杂，因为它需要处理跨浏览器的兼容性问题，而 Axios 则更简洁，它解决了这些问题，并提供了更好的错误处理机制。
3. 功能特性：Axios 提供了一些更先进的功能，例如可以自动将 JavaScript 对象转换为 JSON，以及自动在请求之间取消重复请求等。
4. 配置默认值：Axios 允许你在创建实例时配置默认值，这在你需要与多个服务器通信并且每个服务器有相同的配置时非常有用。
5. 拦截器：Axios 提供了一种机制，可以在发送请求或接收响应前修改它们，这是一个非常有用的功能，可用于日志记录、错误处理等。

以下是使用 Axios 发送 GET 和 POST 请求的基本示例：

// 引入 Axios
const axios = require('axios');
 
// GET 请求
axios.get('https://api.example.com/data')
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    console.error(error);
  });
 
// POST 请求
axios.post('https://api.example.com/data', {
  key1: 'value1',
  key2: 'value2'
})
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    console.error(error);
  });

Axios 是现代前端开发中更加现代和灵活的选择，它提供了更好的错误处理和取消请求的功能，以及更多的配置选项。