【前端】Axios AJAX Fetch

news2025/2/27 8:49:47

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

目录

  • Axios
  • AJAX
    • CORS 允许跨域请求
  • Fetch

Axios

  • axios 是一个基于 Promise 的 JavaScript HTTP 客户端，用于浏览器和 Node.js 中发送 HTTP 请求。它提供了一个简单的 API 来发起请求，并处理请求的结果。axios 主要用于与服务器进行数据交互，比如发送 GET、POST、PUT、DELETE 请求等。相比于浏览器原生的 fetch API，axios 提供了更多的功能和便利，特别是在处理请求和响应时。
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 对象能够：
在不重新加载页面的情况下更新网页
在页面已加载后从服务器请求数据
在页面已加载后从服务器接收数据
在后台向服务器发送数据

responseText 只适用于文本响应。如果服务器返回的是 JSON 或 XML 数据，可以使用 JSON.parse(req.responseText) 来将其转换为 JavaScript 对象，或使用 req.responseXML 获取 XML 格式的响应。

readyState 表示当前请求的状态。
XMLHttpRequest 的请求生命周期有 5 个阶段（0 到 4），表示请求的不同状态：
0 - UNSENT：对象已创建，但尚未调用 open() 方法。
1 - OPENED：已调用 open()，但尚未调用 send()。
2 - HEADERS_RECEIVED：已发送请求，并且已接收到响应头。
3 - LOADING：正在下载响应体。
4 - DONE：响应已完全下载，处理完成。
status 表示 HTTP 响应的状态码。

  • 例子
<!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>

// 获取按钮和结果展示区域
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();
});

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) 的限制。默认情况下，浏览器会阻止网页发起跨域请求，以保护用户的安全。为了绕过这个限制，目标网站必须明确允许你的域名进行请求。

CORS 允许跨域请求

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

  1. 使用 fetch() API（推荐）
    现代浏览器支持 fetch()，可以发起跨域请求，但前提是目标网站支持 CORS。如果目标网站没有明确设置允许跨域访问，那么请求会被浏览器阻止。如果目标网站支持 CORS 并正确设置了头部（例如 Access-Control-Allow-Origin），请求就会成功。
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));  // 错误处理

fetch('https://example.com')
  .then(response => {
    if (!response.ok) {
      throw new Error('Network response was not ok');
    }
    return response.text();  // 将响应转换为文本（HTML）
  })
  .then(html => {
    console.log(html);  // 打印出返回的 HTML 文本
  })
  .catch(error => {
    console.error('There has been a problem with your fetch operation:', error);
  });
  1. 使用 XMLHttpRequest（旧版）
    XMLHttpRequest 是发起 HTTP 请求的传统方式，它也可以用于发起跨域请求，但依赖于目标网站的 CORS 设置。
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();

Fetch

  • 例子：使用 fetch() API 替代 XMLHttpRequest
    fetch() 是现代浏览器提供的一个 API，使用 Promise,比 XMLHttpRequest 更简洁，更强大的功能：fetch() 支持更多的功能，如设置请求头、控制超时等。并且它默认支持异步操作。这里是相同请求的 fetch() 版本：
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);
        });
});

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/2306807.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

ES的简单讲解

ES的简单讲解

功能 &#xff1a; 文档存储 与 文档搜索 特点&#xff1a;比如有一个文档名 “你好” 可以用‘你‘&#xff0c;好&#xff0c;你好都可以搜索到这个文档 ES核心概念 类似于数据库中表的概念&#xff0c;在表的概念下又对数据集合进行了细分 ​ ES_Client查询接口 cpr::R…
阅读更多...
进程间通信(一)

进程间通信(一)

1.进程间通信介绍 数组传输&#xff1a;一个进程需要将它的数据发送给另一个进程 资源共享&#xff1a;多个进程之间共享同样的资源 通知事件&#xff1a;一个进程需要向另一个或者一组进程发送信息&#xff0c;通知发送了某种事件(如进程终止时要通知父进程) 进程控制&…
阅读更多...
adb的安装

adb的安装

1、概念 &#xff08;1&#xff09;adb&#xff08;android debug bridge&#xff09;安卓调试桥&#xff0c;用于完成电脑和手机之间的通信控制。 &#xff08;2&#xff09;xcode来完成对于ios设备的操控&#xff0c;前提是有个mac电脑。 2、adb的安装 &#xff08;1&…
阅读更多...
Nginx 平滑升级/回滚

Nginx 平滑升级/回滚

平滑升级和回滚的前提条件是 nginx 已经安装好&#xff0c;源码安装 nginx 可参考上一篇文章。在上一篇文章的基础上&#xff0c;nginx 已安装好且已启动&#xff0c;目前是 1.24 版本。 一、平滑升级 Nginx 的平滑升级&#xff08;热升级&#xff09;是一种 不中断服务 即可更…
阅读更多...
强化学习演进：GRPO 从何而来

强化学习演进：GRPO 从何而来

强化学习&#xff08;Reinforcement Learning, RL&#xff09;是机器学习的一个分支&#xff0c;其核心是让智能体&#xff08;Agent&#xff09;通过与环境&#xff08;Environment&#xff09;的交互&#xff0c;学习如何采取最优行动&#xff08;Action&#xff09;以最大化…
阅读更多...
AOP进阶-02.通知顺序

AOP进阶-02.通知顺序

一.通知顺序 当有多个切面类中的切入点表达式一样时&#xff0c;这些切面类的执行顺序是怎样的呢&#xff1f;如图我们将定义两个切面类&#xff0c;一个MyAspect2&#xff0c;一个MyAspect3&#xff0c;一个MyAspect4。执行后我们发现&#xff0c; 对于目标方法前的通知方法&…
阅读更多...
深入探讨K8s资源管理和性能优化

深入探讨K8s资源管理和性能优化

#作者&#xff1a;曹付江 文章目录 前言&#xff1a;1&#xff0e;监控 Kubernetes 集群的资源利用率1.1 Prometheus1.2 Kubernetes 度量服务器1.3 Grafana1.4 自定义指标 2. 识别资源瓶颈2.1. 监控工具2.2. 性能剖析2.3 Kubernetes 事件和日志2.4. 群集自动扩展2.5. 负载测试…
阅读更多...
Buildroot 添加自定义模块-内置文件到文件系统

Buildroot 添加自定义模块-内置文件到文件系统

目录 概述实现步骤1. 创建包目录和文件结构2. 配置 Config.in3. 定义 cp_bin_files.mk4. 添加源文件install.shmy.conf 5. 配置与编译 概述 Buildroot 是一个高度可定制和模块化的嵌入式 Linux 构建系统&#xff0c;适用于从简单到复杂的各种嵌入式项目. buildroot的源码中bui…
阅读更多...
形式化数学编程在AI医疗中的探索路径分析

形式化数学编程在AI医疗中的探索路径分析

一、引言 1.1 研究背景与意义 在数字化时代，形式化数学编程和 AI 形式化医疗作为前沿领域，正逐渐改变着我们的生活和医疗模式。形式化数学编程是一种运用数学逻辑和严格的形式化语言来描述和验证程序的技术，它通过数学的精确性和逻辑性，确保程序的正确性和可靠性。在软件…
阅读更多...
HTML——前端基础1

HTML——前端基础1

目录 前端概述 前端能做的事情​编辑 两步完成一个网页程序 前端工具的选择与安装 HTML HTML5介绍 HTML5的DOCTYPE声明 HTML基本骨架 文字标签 标题之标签 标签之段落、换行、水平线 标签之图片 标签之超文本链接 标签之文本 列表标签之有序列表 列表标签之无序…
阅读更多...
Blueprint —— Events

Blueprint —— Events

目录 一&#xff0c;Event Level Reset 二&#xff0c;Event Actor Begin Overlap 三&#xff0c;Event Actor End Overlap 四&#xff0c;Event Hit 五&#xff0c;Event Any Damage 六&#xff0c;Event Point Damage 七&#xff0c;Event Radial Damage 八&#xff…
阅读更多...
Java一揽子集合整理

Java一揽子集合整理

Java 集合框架 List ArrayList&#xff0c;底层Object数组&#xff0c;相关方法add&#xff0c;remove Vector&#xff0c;底层Object数组&#xff0c;线程安全&#xff0c;使用 synchronized 关键字进行同步处理 Stack&#xff0c;继承自Vector&#xff0c;是一个后进先出的…
阅读更多...
第二十四：5.2【搭建 pinia 环境】axios 异步调用数据

第二十四：5.2【搭建 pinia 环境】axios 异步调用数据

第一步安装&#xff1a;npm install pinia 第二步&#xff1a;操作src/main.ts 改变里面的值的信息&#xff1a; <div class"count"><h2>当前求和为&#xff1a;{{ sum }}</h2><select v-model.number"n">　 // .number 这里是…
阅读更多...
HybridCLR+Adressable+Springboot热更

HybridCLR+Adressable+Springboot热更

本文章会手把手教大家如何搭建HybridCLRAdressableSpringboot热更。 创作不易&#xff0c;动动发财的小手点个赞。 安装华佗 首先我们按照官网的快速上手指南搭建一个简易的项目&#xff1a; 快速上手 | HybridCLR 注意在热更的代码里添加程序集。把用到的工具放到程序集里…
阅读更多...
金融行业专题｜某基金公司基于超融合信创平台支持人大金仓数据库的性能评测

金融行业专题｜某基金公司基于超融合信创平台支持人大金仓数据库的性能评测

随着“自主可控”在 IT 基础设施领域不断深化&#xff0c;数据库的国产化替代也被很多金融机构提上日程。为了保证性能&#xff0c;大部分国产数据库都基于信创架构的裸金属服务器部署。在国产虚拟化/超融合平台上&#xff0c;国产数据库性能表现如何&#xff1f;尤其是搭配信创…
阅读更多...
【2025全网最新最全】前端Vue3框架的搭建及工程目录详解

【2025全网最新最全】前端Vue3框架的搭建及工程目录详解

文章目录 安装软件Node.js搭建Vue工程创建Vue工程精简Vue项目文件 Vue工程目录的解读网页标题的设置设置全局样式路由配置 安装软件Node.js 下载地址&#xff1a;https://nodejs.org/zh-cn/ 安装完成后&#xff0c;打开cmd,查看环境是否准备好 node -v npm -vnpm使用之前一定…
阅读更多...
R 语言科研绘图第 27 期 --- 密度图-分组

R 语言科研绘图第 27 期 --- 密度图-分组

在发表科研论文的过程中&#xff0c;科研绘图是必不可少的&#xff0c;一张好看的图形会是文章很大的加分项。 为了便于使用&#xff0c;本系列文章介绍的所有绘图都已收录到了 sciRplot 项目中&#xff0c;获取方式&#xff1a; R 语言科研绘图模板 --- sciRplothttps://mp.…
阅读更多...
QT各种版本下载安装

QT各种版本下载安装

参考链接&#xff1a; 【Qt】超详细&#xff01;Qt4.8.6和VS2010的配置及使用 由于QT官网一般现在进不去&#xff0c;所以下载一些QT版本只能通过镜像或者以前下载存储的安装包来进行&#xff0c;现在推荐两种方法 从参考链接中搬过来&#xff1a; 方案一&#xff1a;国内镜…
阅读更多...
信息系统的安全防护

信息系统的安全防护

文章目录 引言**1. 物理安全****2. 网络安全****3. 数据安全****4. 身份认证与访问控制****5. 应用安全****6. 日志与监控****7. 人员与管理制度****8. 其他安全措施****9. 安全防护框架**引言 从技术、管理和人员三个方面综合考虑，构建多层次、多维度的安全防护体系。 信息…
阅读更多...
如何解决svn st中出现！（冲突）的问题

如何解决svn st中出现！（冲突）的问题

在 SVN&#xff08;Subversion&#xff09;中&#xff0c;svn status 命令用于查看工作副本的状态。当你看到 ! 符号时&#xff0c;通常表示文件或目录在工作副本中丢失&#xff08;missing&#xff09;。以下是解决这个问题的步骤&#xff1a; 1. 理解 ! 的含义 ! 表示该文件…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023