前端請求全面解析之AJAX、Axios?與?Fetch的使用詳解與代碼示例

更新時間：2025年04月14日 10:28:27 作者：羊思茗520

這篇文章主要介紹了前端請求全面解析之AJAX、Axios?與?Fetch的使用詳解與代碼示例,AJAX是早期的異步請求技術,FetchAPI是現代的基于Promise的請求方案,Axios是第三方庫,支持自動轉換JSON、攔截器等功能,文中通過代碼介紹的非常詳細,需要的朋友可以參考下

前言

在前端開發(fā)中，與后端數據交互是十分常見的需求。從傳統(tǒng)的 AJAX 到現代的 fetch API，再到廣受歡迎的第三方庫 Axios，各種方案各有優(yōu)劣。本文將逐一解析這三種請求方式的原理、使用方法及代碼示例，幫助你選擇適合項目需求的解決方案。

1. AJAX —— 傳統(tǒng)的異步請求

AJAX（Asynchronous JavaScript and XML）是最早期實現瀏覽器異步請求的技術，主要基于 XMLHttpRequest 對象。雖然如今我們更傾向于使用基于 Promise 的方案，但了解 AJAX 的原理依然有助于深入掌握 HTTP 請求的底層實現。

1.1 基本用法示例

下面是使用 XMLHttpRequest 發(fā)起 GET 請求的示例：

// 創(chuàng)建 XMLHttpRequest 對象
var xhr = new XMLHttpRequest();

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

// 監(jiān)聽請求狀態(tài)變化
xhr.onreadystatechange = function() {
  if (xhr.readyState === 4) { // 請求完成
    if (xhr.status === 200) { // 成功返回
      console.log("AJAX Success:", xhr.responseText);
    } else { // 出錯處理
      console.error("AJAX Error:", xhr.status);
    }
  }
};

// 發(fā)送請求
xhr.send();

1.2 AJAX 特點

兼容性好：幾乎所有瀏覽器都支持 XMLHttpRequest。
回調函數：需要通過 onreadystatechange 回調處理響應，代碼結構較為冗長，不夠直觀。
數據格式：最初主要用于傳輸 XML，但現在常用于 JSON 等數據格式。

2. Fetch API —— 現代化請求方案

Fetch API 是瀏覽器提供的原生異步請求接口，基于 Promise 實現，更符合現代 JavaScript 編程習慣。它讓代碼更加簡潔、易讀，并支持更豐富的請求配置。

2.1 基本用法示例

使用 fetch 發(fā)起 GET 請求的示例代碼如下：

fetch("https://api.example.com/data")
  .then(response => {
    // 檢查響應狀態(tài)
    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 環(huán)境。它提供了豐富的功能，如請求攔截、響應攔截、取消請求、自動轉換 JSON 數據等，被廣泛用于實際項目中。

3.1 安裝 Axios

通過 npm 或 yarn 安裝：

# 使用 npm 安裝
npm install axios

# 或者使用 yarn 安裝
yarn add axios

3.2 基本用法示例

使用 Axios 發(fā)起 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 發(fā)起 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);
  });