前端请求全面解析之AJAX、Axios 与 Fetch的使用详解与代码示例_Javascript

前言

在前端开发中，与后端数据交互是十分常见的需求。从传统的 ajax 到现代的 fetch api，再到广受欢迎的第三方库 axios，各种方案各有优劣。本文将逐一解析这三种请求方式的原理、使用方法及代码示例，帮助你选择适合项目需求的解决方案。

1. ajax —— 传统的异步请求

ajax（asynchronous javascript and xml）是最早期实现浏览器异步请求的技术，主要基于 xmlhttprequest 对象。虽然如今我们更倾向于使用基于 promise 的方案，但了解 ajax 的原理依然有助于深入掌握 http 请求的底层实现。

1.1 基本用法示例

下面是使用 xmlhttprequest 发起 get 请求的示例：

// 创建 xmlhttprequest 对象
var xhr = new xmlhttprequest();

// 初始化请求：get 方法，异步请求
xhr.open("get", "https://api.example.com/data", true);

// 监听请求状态变化
xhr.onreadystatechange = function() {
  if (xhr.readystate === 4) { // 请求完成
    if (xhr.status === 200) { // 成功返回
      console.log("ajax success:", xhr.responsetext);
    } else { // 出错处理
      console.error("ajax error:", xhr.status);
    }
  }
};

// 发送请求
xhr.send();

1.2 ajax 特点

兼容性好：几乎所有浏览器都支持 xmlhttprequest。
回调函数：需要通过 onreadystatechange 回调处理响应，代码结构较为冗长，不够直观。
数据格式：最初主要用于传输 xml，但现在常用于 json 等数据格式。

2. fetch api —— 现代化请求方案

fetch api 是浏览器提供的原生异步请求接口，基于 promise 实现，更符合现代 javascript 编程习惯。它让代码更加简洁、易读，并支持更丰富的请求配置。

2.1 基本用法示例

使用 fetch 发起 get 请求的示例代码如下：

fetch("https://api.example.com/data")
  .then(response => {
    // 检查响应状态
    if (!response.ok) {
      throw new error("network response was not ok, status: " + response.status);
    }
    // 解析 json 数据
    return response.json();
  })
  .then(data => {
    console.log("fetch success:", data);
  })
  .catch(error => {
    console.error("fetch error:", error);
  });

2.2 fetch 特点

简洁易用：基于 promise，无需写复杂的回调函数。
响应处理：支持链式调用，可以轻松处理响应数据（如 json、blob、text 等）。
灵活配置：可以通过配置选项设定请求方法、头信息、请求体等。

3. axios —— 第三方 http 请求库

axios 是一款基于 promise 的 http 客户端，兼容浏览器和 node.js 环境。它提供了丰富的功能，如请求拦截、响应拦截、取消请求、自动转换 json 数据等，被广泛用于实际项目中。

3.1 安装 axios

通过 npm 或 yarn 安装：

# 使用 npm 安装
npm install axios

# 或者使用 yarn 安装
yarn add axios

3.2 基本用法示例

使用 axios 发起 get 请求的示例代码如下：

import axios from "axios";

axios.get("https://api.example.com/data")
  .then(response => {
    console.log("axios success:", response.data);
  })
  .catch(error => {
    console.error("axios error:", error);
  });

同样，也可以使用 axios 发起 post 请求：

axios.post("https://api.example.com/data", {
    name: "john doe",
    age: 30
  })
  .then(response => {
    console.log("axios post success:", response.data);
  })
  .catch(error => {
    console.error("axios post error:", error);
  });