【前端】Axios & AJAX & Fetch

七灵微2025-02-25 21:08

不定期更新，建议关注收藏点赞。

目录

Axios

  • axios 是一个基于 Promise 的 JavaScript HTTP 客户端，用于浏览器和 Node.js 中发送 HTTP 请求。它提供了一个简单的 API 来发起请求，并处理请求的结果。axios 主要用于与服务器进行数据交互，比如发送 GET、POST、PUT、DELETE 请求等。相比于浏览器原生的 fetch API，axios 提供了更多的功能和便利，特别是在处理请求和响应时。
javascript 复制代码 
axios.get('/api/todolist')
.then((res)=>{
  console.log(res.data);
  this.setState(()=>{
    return {
    list: [...res.data]
    }
  })
.catch(()=>{alert('error')})
}
  1. 安装 axios

如果你使用的是 Node.js 或者 React 等项目，首先需要通过 npm 或 yarn 安装 axios。

复制代码 
# 使用 npm 安装
npm install axios

# 使用 yarn 安装
yarn add axios
  1. 基本用法

axios 提供了多种方法来发送 HTTP 请求，包括 axios.get()、axios.post()、axios.put()、axios.delete()等。

发送 GET 请求

复制代码 
import axios from 'axios';

axios.get('https://api.example.com/data')
  .then(response => {
    console.log(response.data);  // 响应数据
  })
  .catch(error => {
    console.error('Error fetching data:', error);
  });
  • get 方法用于发送 GET 请求。
  • response.data 包含了从服务器返回的数据。

发送 POST 请求

复制代码 
import axios from 'axios';

const data = {
  name: 'John Doe',
  email: 'john@example.com'
};

axios.post('https://api.example.com/users', data)
  .then(response => {
    console.log('User created:', response.data);
  })
  .catch(error => {
    console.error('Error posting data:', error);
  });
  • post 方法用于发送 POST 请求。
  • 请求体中的数据（data）会被发送到服务器。

发送 PUT 请求

复制代码 
import axios from 'axios';

const updatedData = {
  name: 'Jane Doe',
  email: 'jane@example.com'
};

axios.put('https://api.example.com/users/1', updatedData)
  .then(response => {
    console.log('User updated:', response.data);
  })
  .catch(error => {
    console.error('Error updating data:', error);
  });
  • put 方法用于发送 PUT 请求。它通常用于更新现有的资源。

发送 DELETE 请求

复制代码 
import axios from 'axios';

axios.delete('https://api.example.com/users/1')
  .then(response => {
    console.log('User deleted:', response.data);
  })
  .catch(error => {
    console.error('Error deleting data:', error);
  });
  • delete 方法用于删除指定的资源。
  1. 请求配置

axios 支持配置请求的各个方面，如 headers、params、timeout 等。你可以通过第二个参数传递一个配置对象来设置这些选项。

示例：设置请求头

复制代码 
import axios from 'axios';

axios.get('https://api.example.com/data', {
  headers: {
    'Authorization': 'Bearer your_token_here'
  }
})
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    console.error('Error:', error);
  });

示例：设置请求超时

复制代码 
import axios from 'axios';

axios.get('https://api.example.com/data', {
  timeout: 5000  // 设置超时时间为 5 秒
})
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    if (error.code === 'ECONNABORTED') {
      console.log('Request timeout');
    } else {
      console.error('Error:', error);
    }
  });
  1. 拦截器（Interceptors）

axios 提供了拦截器机制，使得你可以在请求发送之前或响应返回之后执行一些逻辑。

请求拦截器

复制代码 
import axios from 'axios';

axios.interceptors.request.use(config => {
  console.log('Request Interceptor:', config);
  // 在发送请求之前做些什么，比如添加 token 等
  config.headers['Authorization'] = 'Bearer your_token_here';
  return config;
}, error => {
  return Promise.reject(error);
});

响应拦截器

复制代码 
import axios from 'axios';

axios.interceptors.response.use(response => {
  console.log('Response Interceptor:', response);
  return response;
}, error => {
  console.error('Response Error:', error);
  return Promise.reject(error);
});
  • 请求拦截器可以在请求发送之前修改请求的配置。
  • 响应拦截器可以在响应返回之后处理响应数据或者捕获错误。
  1. 取消请求

有时你可能需要取消一个正在进行的请求，axios 提供了 CancelToken 来实现这一功能。

复制代码 
import axios from 'axios';

const cancelToken = axios.CancelToken;
const source = cancelToken.source();

axios.get('https://api.example.com/data', {
  cancelToken: source.token
})
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    if (axios.isCancel(error)) {
      console.log('Request canceled:', error.message);
    } else {
      console.error('Error:', error);
    }
  });

// 取消请求
source.cancel('Operation canceled by the user.');
  1. 并发请求

axios 还可以让你同时发送多个请求，并在它们全部完成后进行处理，使用 axios.all 和 axios.spread 来实现。

复制代码 
import axios from 'axios';

const request1 = axios.get('https://api.example.com/data1');
const request2 = axios.get('https://api.example.com/data2');

axios.all([request1, request2])
  .then(axios.spread((response1, response2) => {
    console.log('Response 1:', response1.data);
    console.log('Response 2:', response2.data);
  }))
  .catch(error => {
    console.error('Error:', error);
  });
  1. 处理错误

axios 会将所有错误统一通过 catch 捕获。你可以通过 error.response 来访问服务器返回的错误信息。

复制代码 
import axios from 'axios';

axios.get('https://api.example.com/data')
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    if (error.response) {
      // 服务器返回了响应
      console.error('Response error:', error.response);
    } else if (error.request) {
      // 请求已发出但没有收到响应
      console.error('Request error:', error.request);
    } else {
      // 发生了其他错误
      console.error('Error:', error.message);
    }
  });
  • axios v.s. AJAX v.s. fetch

axios 在前端开发中具有较高的使用率，fetch 作为原生 API 也被广泛采用，而 XMLHttpRequest 的使用率相对较低。

特性 AJAX (XMLHttpRequest) Fetch API Axios
基于 回调函数 Promise Promise
请求响应处理 需要手动管理请求状态和解析响应 自动解析 JSON，但仍需要手动处理错误 自动解析 JSON，无需手动处理响应数据
请求和响应拦截器 无 无 支持请求和响应拦截器
跨域请求 需要额外配置 CORS 头 需要额外配置 CORS 头 支持自动处理跨域请求（需要后端支持）
请求取消 需要使用 AbortController 需要使用 AbortController 支持请求取消，直接使用 CancelToken
浏览器兼容性 在所有浏览器中都能工作，但老旧浏览器不支持 大多数现代浏览器支持，但 IE 需要 polyfill 支持现代浏览器和 IE（需要 polyfill）
支持的功能 基本的 HTTP 请求功能 基本的 HTTP 请求功能 更丰富的功能：请求/响应拦截器、取消请求等
使用难度 相对较复杂，需要手动管理请求状态和响应解析 简单，支持 Promise，且 API 直观 简单，且有更多的功能和配置选项
  • axios与python requests库
功能 Axios (JavaScript) Requests (Python)
异步操作 基于 Promise，支持 async/await 同步请求，需要配合 aiohttp 异步库
自动解析响应 自动解析 JSON 自动解析 JSON
请求拦截器/响应拦截器 支持请求和响应拦截器 不支持直接的拦截器功能
取消请求 支持 CancelToken 来取消请求 无原生支持取消请求
跨域请求 处理跨域请求（CORS） 不涉及浏览器，跨域由后端控制
浏览器支持 支持现代浏览器 仅支持 Python 环境

低级 HTTP 请求通常是指在较低的抽象层次上进行的 HTTP 请求，通常需要开发者手动处理许多细节，例如请求头、参数、响应处理、编码等。相比高级 HTTP 请求，低级 HTTP 请求提供了更多的灵活性和控制，但也要求开发者更了解底层的 HTTP 协议和细节。

python中类似的库：requests、httpx、aiohttp、urllib、pycurl、tornado，后端开发使用。

AJAX

AJAX（Asynchronous JavaScript and XML）本身并不属于 HTML。它是一个基于 JavaScript 的技术，用于实现网页的异步请求和更新。因此，AJAX 更准确地说是 JavaScript 技术，而不是 HTML 技术。

AJAX（Asynchronous JavaScript and XML）是一个用于创建动态和交互式网页的技术，它允许网页在不重新加载整个页面的情况下，与服务器交换数据并更新部分网页内容。这种方式能提高用户体验，因为它使得网页加载更加流畅，用户可以与页面进行交互，而无需等待页面的完全刷新。

尽管它的名字中有 "XML"，但现在 AJAX 主要用于通过 JSON（JavaScript Object Notation）与服务器交换数据。不过，它也支持通过 XML、HTML 或纯文本等格式进行数据交换。

  • AJAX 的工作原理
    AJAX 允许浏览器在后台发送 HTTP 请求到服务器，获取数据并在不刷新页面的情况下更新网页内容。通常，AJAX 使用 JavaScript 与服务器进行通信，通过 XMLHttpRequest 对象或现代的 fetch API 来发送请求。
    AJAX 的基本流程如下：
    用户发起请求（例如，点击按钮或加载页面时）。
    JavaScript 使用 XMLHttpRequest 或 fetch() 向服务器发送请求（GET、POST 等）。
    服务器接收请求，处理数据，并返回响应。
    JavaScript 处理服务器返回的数据，并更新页面内容。

什么是 XMLHttpRequest 对象？

XMLHttpRequest 对象用于在后台与服务器交换数据。

XMLHttpRequest 对象能够：

在不重新加载页面的情况下更新网页

在页面已加载后从服务器请求数据

在页面已加载后从服务器接收数据

在后台向服务器发送数据

  • 例子
html 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>AJAX Example</title>
</head>
<body>
    <h1>AJAX Example</h1>
    <button id="loadData">Load Data</button>
    <div id="result"></div>  <!-- 结果将显示在这里 -->
    
    <script src="app.js"></script>
</body>
</html>
javascript 复制代码 
// 获取按钮和结果展示区域
const button = document.getElementById('loadData');
const result = document.getElementById('result');

// 添加点击事件监听器
button.addEventListener('click', function() {
    // 创建一个新的 XMLHttpRequest 对象
    const xhr = new XMLHttpRequest();

    // 配置请求：GET 请求，指向一个 JSON 文件
    xhr.open('GET', 'data.json', true);  // 异步请求

    // 设置 onload 事件处理函数
    xhr.onload = function() {
        if (xhr.status === 200) {  // 如果请求成功
            const data = JSON.parse(xhr.responseText);  // 解析返回的 JSON 数据
            result.innerHTML = `Message: ${data.message}`;  // 显示结果
        } else {
            result.innerHTML = 'Error loading data';
        }
    };

    // 发送请求
    xhr.send();
});
  • 例子：使用 fetch() API 替代 XMLHttpRequest
    fetch() 是现代浏览器提供的一个 API，使用 Promise,比 XMLHttpRequest 更简洁，更强大的功能：fetch() 支持更多的功能，如设置请求头、控制超时等。并且它默认支持异步操作。这里是相同请求的 fetch() 版本：
javascript 复制代码 
const button = document.getElementById('loadData');
const result = document.getElementById('result');

button.addEventListener('click', function() {
    // 使用 fetch 发起请求
    fetch('data.json')
        .then(response => response.json())  // 解析返回的 JSON
        .then(data => {
            result.innerHTML = `Message: ${data.message}`;  // 显示数据
        })
        .catch(error => {
            result.innerHTML = 'Error loading data';
            console.error(error);
        });
});

XMLHttpRequest对象的open()方法有3个参数，第一个参数指定是GET还是POST，第二个参数指定URL地址，第三个参数指定是否使用异步，默认是true，所以不用写。

注意，尽量不要把第三个参数指定为false，否则浏览器将停止响应，直到AJAX请求完成。如果这个请求耗时10秒，那么10秒内你会发现浏览器处于"假死"状态。

最后调用send()方法才真正发送请求。GET请求不需要参数，POST请求需要把body部分以字符串或者FormData对象传进去。

  • 上面代码的URL使用的是相对路径。如果你把它改为'http://www.sina.com.cn/'，再运行，肯定报错。在Chrome的控制台里，还可以看到错误信息。
    这是因为浏览器的同源策略 导致的。默认情况下，JavaScript在发送AJAX请求时，URL的域名必须和当前页面完全一致。
    完全一致的意思是，域名要相同（www.example.com和example.com不同），协议要相同（http和https不同），端口号要相同（默认是:80端口，它和:8080就不同）使用 JavaScript 请求外域（即跨域请求）时，通常会遇到 跨域资源共享 (CORS, Cross-Origin Resource Sharing) 的限制。默认情况下，浏览器会阻止网页发起跨域请求，以保护用户的安全。为了绕过这个限制，目标网站必须明确允许你的域名进行请求。

用JavaScript怎么请求外域（就是其他网站）的URL了呢？

  1. 使用 fetch() API（推荐）
    现代浏览器支持 fetch()，可以发起跨域请求，但前提是目标网站支持 CORS。如果目标网站没有明确设置允许跨域访问，那么请求会被浏览器阻止。如果目标网站支持 CORS 并正确设置了头部（例如 Access-Control-Allow-Origin），请求就会成功。
javascript 复制代码 
fetch('https://example.com/data', {
    method: 'GET',  // 或者 'POST'，取决于你的请求类型
    headers: {
        'Content-Type': 'application/json'
    },
    mode: 'cors'  // 必须设置为 'cors'，表示进行跨域请求
})
    .then(response => response.json())  // 解析 JSON 数据
    .then(data => console.log(data))    // 处理返回的响应
    .catch(error => console.error('Error:', error));  // 错误处理
  1. 使用 XMLHttpRequest（旧版）
    XMLHttpRequest 是发起 HTTP 请求的传统方式，它也可以用于发起跨域请求，但依赖于目标网站的 CORS 设置。
javascript 复制代码 
var xhr = new XMLHttpRequest();
xhr.open('GET', 'https://example.com/data', true);
xhr.setRequestHeader('Content-Type', 'application/json');
xhr.onreadystatechange = function () {
    if (xhr.readyState === 4 && xhr.status === 200) {
        console.log(JSON.parse(xhr.responseText));
    }
};
xhr.send();

readyState 表示当前请求的状态。

XMLHttpRequest 的请求生命周期有 5 个阶段（0 到 4），表示请求的不同状态：

0 - UNSENT：对象已创建，但尚未调用 open() 方法。

1 - OPENED：已调用 open()，但尚未调用 send()。

2 - HEADERS_RECEIVED：已发送请求，并且已接收到响应头。

3 - LOADING：正在下载响应体。

4 - DONE：响应已完全下载，处理完成。

status 表示 HTTP 响应的状态码。

相关推荐
吴声子夜歌10 小时前
Nginx应用与运维——Nginx Web服务应用实战（HTTPS安全服务器的搭建）
运维·前端·nginx
liangshanbo121510 小时前
Monorepo 工程化面试题：如何设计 Web + Node.js 中间层 + Shared + Scripts 的 Monorepo？
前端·node.js
IT_陈寒10 小时前
Redis集群切换主节点时，服务竟然全员掉线
前端·人工智能·后端
wangbing112510 小时前
开发指南147-WebSocket-前端
前端·websocket·网络协议
吴声子夜歌10 小时前
Nginx应用与运维——Nginx Web服务应用实战（伪流媒体服务器的搭建）
运维·前端·nginx
铅笔小新z10 小时前
【stm32】理解弱引用
javascript·stm32·嵌入式硬件
ss27311 小时前
AI全栈实战 | 2.4-01 Node 与前端工程化：前端为什么离不开 Node，它不只是构建工具的宿主
前端
aixingpan11 小时前
aixingpan.cn API开发文档：api_docs_transit接口指南
前端·php
鬓戈11 小时前
Volta：解决 nvm「不能同时存在多个 Node 版本」的痛点
前端
吴声子夜歌11 小时前
Nginx应用与运维——Nginx Web服务应用实战（HTTP增强协议服务器的搭建）
运维·前端·nginx
热门推荐
01历年考研数学一、数学二、数学三真题试卷及答案PDF02国内可直接用、免费额度/永久免费的大模型API清单（含 SiliconFlow、火山、阿里、智谱、百度、Kimi、DeepSeek、DMXAPI 等）03Telegram APK 下载安装完整指南 — 2026年最新04如何新建文件夹？ 电脑新建文件夹的4种方法05GitHub 镜像站点06蜘蛛磁力 搜索引擎大全，如何使用蜘蛛磁力查找磁力链接072026 爱知・名古屋亚运会怎么看？直播平台+赛程安排分享08Windows 10/11 如何退出微软账户并改用本地账户登录（含找不到选项的解决方法）09微信历史版本含下载地址（ Windows PC | 安卓 | MAC ）及设置微信不更新10给AI一张“业务概念地图“：本体如何从哲学走向企业智能