【前端】Axios AJAX Fetch

news/2025/2/25 21:13:53

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

目录

  • Axios
  • AJAX

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 APIAxios
基于回调函数PromisePromise
请求响应处理需要手动管理请求状态和解析响应自动解析 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 对象能够：
在不重新加载页面的情况下更新网页
在页面已加载后从服务器请求数据
在页面已加载后从服务器接收数据
在后台向服务器发送数据

  • 例子
<!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 响应的状态码。


http://www.niftyadmin.cn/n/5865947.html

相关文章

一周学会Flask3 Python Web开发-Jinja2模板访问对象

一周学会Flask3 Python Web开发-Jinja2模板访问对象

锋哥原创的Flask3 Python Web开发 Flask3视频教程&#xff1a; 2025版 Flask3 Python web开发 视频教程(无废话版) 玩命更新中~_哔哩哔哩_bilibili 如果渲染模板传的是对象&#xff0c;如果如何来访问呢&#xff1f; 我们看下下面示例&#xff1a; 定义一个Student类 cla…
阅读更多...
开源基准测试模拟器：BlueROV2 水下机器人的控制

开源基准测试模拟器：BlueROV2 水下机器人的控制

拜读An Open-Source Benchmark Simulator: Control of a BlueROV2 Underwater Robot 非常感谢Esben Uth的帮助。 本文介绍了在 Simulink™ 中实现的常用且低成本的遥控潜水器 &#xff08;ROV&#xff09; BlueROV2 的仿真模型环境&#xff0c;该环境已针对水下航行器的基准控…
阅读更多...
深入理解Redis：从线程模型到应用场景的全面解析

深入理解Redis：从线程模型到应用场景的全面解析

在当今快速发展的技术领域&#xff0c;高效的内存数据存储解决方案对于提升应用性能至关重要。Redis 作为一款开源的内存数据结构存储系统&#xff0c;不仅能够用作数据库、缓存&#xff0c;还能作为消息中间件&#xff0c;在实现高速数据处理和复杂数据结构操作方面提供了强大…
阅读更多...
【论文阅读】distilling cognitive backdoor patterns within an image

【论文阅读】distilling cognitive backdoor patterns within an image

本文是输入级别的后门检测 认知蒸馏&#xff08;Cognitive Distillation, CD&#xff09;用于提取和检测图像中的后门模式。 其核心思想是从输入图像中提取出对模型预测起决定性作用的“最小本质”。CD通过优化输入掩码&#xff0c;从输入图像中提取出一个小的模式&#xff0…
阅读更多...
java23种设计模式-外观模式

java23种设计模式-外观模式

外观模式&#xff08;Facade Pattern&#xff09;学习笔记 &#x1f31f; 定义 外观模式属于结构型设计模式&#xff0c;提供一个统一的接口来访问子系统中的多个接口。它通过定义一个高层接口简化客户端与复杂子系统的交互。 &#x1f3af; 适用场景 为复杂子系统提供简单入…
阅读更多...
从三个维度了解 RPC（Remote Procedure Call，远程过程调用）

从三个维度了解 RPC（Remote Procedure Call，远程过程调用）

1. 什么是远程调用 远程调用是指在分布式系统中&#xff0c;不同进程或服务之间通过网络进行通信和数据交换的过程。与本地调用不同&#xff0c;远程调用涉及跨越网络边界&#xff0c;通常需要处理网络延迟、传输协议、序列化/反序列化等问题。 特点&#xff1a; 跨进程通信…
阅读更多...
wpf 页面切换的实现方式

wpf 页面切换的实现方式

第一种&#xff1a;点击左边显示右边 TreeView&#xff08;左边&#xff09; ContentControl&#xff08;右边&#xff09; ContentControl是Prism的 Region TreeView点击事件&#xff0c;在region里动态加载view 如&#xff1a; region.Add(view); 第二种&a…
阅读更多...
【数据结构】(12) 反射、枚举、lambda 表达式

【数据结构】(12) 反射、枚举、lambda 表达式

一、反射 1、反射机制定义及作用 反射是允许程序在运行时检查和操作类、方法、属性等的机制&#xff0c;能够动态地获取信息、调用方法等。换句话说&#xff0c;在编写程序时&#xff0c;不需要知道要操作的类的具体信息&#xff0c;而是在程序运行时获取和使用。 2、反射机制…
阅读更多...
最新文章

Copyright @ 2022~2023