当前位置： 首页 > news >正文

【前端】前后端的网络通信基础操作（原生ajax, axios, fetch）

news 2026/5/13 0:18:01

概述

前后端网络请求工具

  • 原生ajax
  • fetch api
  • axios

GET和POST请求

get只能发纯文本

post可以发不同类型的数据，要设置请求头，需要告诉服务器一些额外信息

测试服务器地址

有一些公共的测试 API 可供学习和测试用途。这些 API 允许你发送 HTTP 请求（GET、POST 等），并从服务器获取响应。以下是一些常用的公共测试 API：

  1. JSONPlaceholder:
    • Base URL: https://jsonplaceholder.typicode.com
    • Example Endpoints:
      • Posts: /posts
      • Comments: /comments
      • Users: /users
    • Usage Example (GET): https://jsonplaceholder.typicode.com/posts/1
  2. ReqRes:
    • Base URL: https://reqres.in
    • Example Endpoints:
      • Users: /api/users
      • Single User: /api/users/2
      • Create User: /api/users
    • Usage Example (POST): https://reqres.in/api/users

原生ajax

前端页面代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<script src="ajax_get.js"></script>
</body>
</html>

GET

//原生ajax
const xhr = new XMLHttpRequest();
//xhr.open('GET', 'http://wuyou.com/common/get');
xhr.open('GET', 'https://jsonplaceholder.typicode.com/posts/1')
xhr.send();
xhr.onreadystatechange = function(){if(xhr.readyState == XMLHttpRequest.DONE && xhr.status === 200){console.log(JSON.parse(xhr.responseText));}
}

返回结果

在这里插入图片描述

POST

const xhr = new XMLHttpRequest();
xhr.open('POST', 'https://jsonplaceholder.typicode.com/posts');
xhr.setRequestHeader('Content-Type', 'application/json'); // 修改 Content-Type
xhr.send(JSON.stringify({title: 'foo',body: 'bar',userId: 1
}));xhr.onreadystatechange = function() {if (xhr.readyState === XMLHttpRequest.DONE && xhr.status === 201) {console.log(xhr.responseText); // 不解析 JSON，直接输出响应文本}
};

返回结果

请添加图片描述

Axios

前端页面代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<script src="axios.min.js"></script>
<script src = 'axiosjs.js'></script>
</body>
</html>

直接传输

最简单的axios使用方式，get函数中填写请求的url

//用axios来get一个请求
axios.get('https://jsonplaceholder.typicode.com/posts/1').then(response => {console.log('GET Response:', response.data);}).catch(error => {console.error('GET Error:', error);});

返回结果

在这里插入图片描述

异步传输

用异步的方式传输，在axios中配置地址，请求/响应拦截器

//异步请求处理
//异步发送get请求
(async () => {try {const ins = axios.create({baseURL: 'https://jsonplaceholder.typicode.com',});// 请求拦截器ins.interceptors.request.use((config) => {console.log('发送了请求');return config;});// 响应拦截器ins.interceptors.response.use((response) => {// 在这里可以对响应数据进行处理return response.data;},(error) => {// 在这里处理响应错误return Promise.reject(error);});const res = await ins.get('/posts/1');const res2 = await ins.post('/posts', {title: 'foo',body: 'bar',userId: 1,});console.log('GET 的结果:', res);console.log('POST 的结果:', res2);} catch (error) {console.error('发生错误:', error);}
})();

返回结果

在这里插入图片描述

Fetch

前端页面代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<script src = 'fetch_get.js'></script>
</body>
</html>

GET请求

fetch('https://jsonplaceholder.typicode.com/posts/1')
.then(res => {if(res.ok){return res.json()}
})
.then(data =>{console.log(data)}).catch(error =>{console.error(error)
})

结果：
在这里插入图片描述

POST请求

在参数处需要传入一些配置项

//post在参数的地方需要传入一些配置项const postData = {title: 'foo',body: 'bar',userId: 1
};
console.log("test")
fetch('https://jsonplaceholder.typicode.com/posts', {method: 'POST',headers:{'Content-Type': 'application/json'},body:JSON.stringify({postData})}
).then(res =>{if(res.ok){return res.json()}
})
.then(data =>{console.log(data)}
)

结果

在这里插入图片描述

相关文章：

【前端】前后端的网络通信基础操作（原生ajax, axios, fetch）

概述 前后端网络请求工具 原生ajaxfetch apiaxios GET和POST请求 get只能发纯文本 post可以发不同类型的数据&#xff0c;要设置请求头&#xff0c;需要告诉服务器一些额外信息 测试服务器地址 有一些公共的测试 API 可供学习和测试用途。这些 API 允许你发送 HTTP 请求…...

编程日记 2024/1/16 2:41:39

Matter - 配置工厂数据（2）

部分关键名词参数简介 PASE(Passcode-Authenticated Session Establishment): 基于密码认证的会话建立&#xff0c;用于在 Commissioning 的时候 Commissioner 与 Matter Deivce 之间建立安全信道&#xff0c;生成对称加密密钥用于 Commissioning 后续通信消息进行加、解密和完…...

编程日记 2024/1/16 2:40:38

版本控制背景知识

版本控制背景知识 本文是关于 Git 系列文章的导读&#xff0c;我们先介绍一下版本控制的背景知识。 什么是版本控制 版本控制是一种记录一个或若干文件内容变化&#xff0c;以便将来查阅特定版本修订情况的系统。它将什么时候、什么人更改了文件的什么内容等信息如实记录下来…...

编程日记 2024/1/16 2:39:37

tensorflow报错: DNN library is no found

错误描述 如上图在执行程序的时候&#xff0c;会出现 DNN library is no found 的报错 解决办法 这个错误基本上说明你安装的 cudnn有问题&#xff0c;或者没有安装这个工具。 首先检测一下你是否安装了 cudnn 进入CUDA_HOME下&#xff0c;也就是进入你的cuda的驱动的安装目…...

编程日记 2024/1/16 2:38:36

DA14531-高级应用篇-用户如何开启OTA服务

文章目录 1. OTA相关文件2.OTA宏定义列表3.OTA主要函数接口4.OTA具体实施步骤5.总结1. OTA相关文件 1）app_suotar_task.c和app_suotar_task.h 2）app_suotar.c和app_suotar.h 2.OTA宏定义列表 宏定义注解CFG_PRF_SUOTAR用户开启SOTA功能BLE_SUOTA_RECEIVERSOTA功能服务CFG_S…...

编程日记 2024/1/16 2:37:35

国内镜像源配置方法（包括临时和永久方法）

国内镜像源&#xff1a; 阿里云 http://mirrors.aliyun.com/pypi/simple/中国科技大学 https://pypi.mirrors.ustc.edu.cn/simple/豆瓣 http://pypi.douban.com/simplePython官方 https://pypi.python.org/simple/v2ex http://pypi.v2ex.com/simple/中国科学院 http://pypi.mi…...

编程日记 2024/1/16 2:35:33

数据结构二叉树--堆（数据结构实现和堆排序的一种实现）

堆是一个数据结构 逻辑结构&#xff1a;完全二叉树&#xff08;要求父节点大于孩子节点或者小于孩子节点&#xff09; 存储结构&#xff1a;顺序存储 typedef int DataType; typedef struct Heap{DataType*data;int size;int capacity; }Heap;void InitHeap(Heap*pH) {asser…...

编程日记 2024/1/16 2:34:32

【Linux】 nohup命令使用

nohup命令 nohup是Linux和Unix系统中的一个命令&#xff0c;其作用是在终端退出时&#xff0c;让进程在后台继续运行。它的全称为“no hang up”&#xff0c;意为“不挂起”。nohup命令可以让你在退出终端或关闭SSH连接后继续运行命令。 nohup 命令&#xff0c;在默认情况下&…...

编程日记 2024/1/16 2:29:27

多维时序 | Matlab实现GRO-CNN-LSTM-Attention淘金算法优化卷积神经网络-长短期记忆网络结合注意力机制多变量时间序列预测

多维时序 | Matlab实现GRO-CNN-LSTM-Attention淘金算法优化卷积神经网络-长短期记忆网络结合注意力机制多变量时间序列预测 目录 多维时序 | Matlab实现GRO-CNN-LSTM-Attention淘金算法优化卷积神经网络-长短期记忆网络结合注意力机制多变量时间序列预测效果一览基本介绍程序设…...

编程日记 2024/1/16 2:23:23

SQL-DQL-基础查询

&#x1f389;欢迎您来到我的MySQL基础复习专栏 ☆* o(≧▽≦)o *☆哈喽~我是小小恶斯法克&#x1f379; ✨博客主页&#xff1a;小小恶斯法克的博客 &#x1f388;该系列文章专栏&#xff1a;重拾MySQL &#x1f379;文章作者技术和水平很有限&#xff0c;如果文中出现错误&am…...

编程日记 2024/1/16 2:20:20

Kubernetes (十三) 存储——持久卷-动静态分配

一. 简介 二. NFS持久化存储步骤&#xff08;静态分配&#xff09; 1. 集群外…...

编程日记 2024/1/16 2:19:19

order by之后的injection(sqllabs第四十六关)

order by相关注入知识 这一关的sql语句是利用的order by 根据输入的id不同数据排序不一样可以确定就是order by order by后面无法使用ubion注入&#xff08;靠找不到&#xff09; 可以利用后面的参数进行攻击 1&#xff09;数字 没作用考虑布尔类型 rand和select ***都可以 …...

编程日记 2024/1/16 2:18:18

C++ 树与图的广度优先遍历 || 模版题 ：图中点的层次

给定一个 n 个点 m 条边的有向图&#xff0c;图中可能存在重边和自环。 所有边的长度都是 1 &#xff0c;点的编号为 1∼n 。 请你求出 1 号点到 n 号点的最短距离&#xff0c;如果从 1 号点无法走到 n 号点&#xff0c;输出 −1 。 输入格式 第一行包含两个整数 n 和 m 。 …...

编程日记 2024/1/16 2:16:16

k8s---pod控制器

pod控制器发的概念&#xff1a; 工作负载&#xff0c;workload用于管理pod的中间层&#xff0c;确保pod资源符合预期的状态。 预期状态&#xff1a; 1、副本数 2、容器重启策略 3、镜像拉取策略 pod出故障的出去等等 pod控制器的类型&#xff1a; 1、replicaset&#xf…...

编程日记 2024/1/16 2:15:15

2024.1.11力扣每日一题——构造有效字符串的最少插入数

2024.1.11 题目来源我的题解方法一 暴力模拟方法二 动态规划方法三 直接拼接方法四 计算组数 题目来源 力扣每日一题&#xff1b;题序&#xff1a;2645 我的题解 方法一 暴力模拟 直接模拟&#xff0c;根据题意可知 若是abc则不用插入&#xff0c;若是ab,ac,bc这需要 插入一…...

编程日记 2024/1/16 2:14:13

软件测试|如何使用Selenium处理隐藏元素

简介 我们在使用selenium进行web自动化测试时&#xff0c;有时候会遇到元素被隐藏&#xff0c;从而无法对元素进行操作&#xff0c;导致我们的用例报错的情况。当我们遇到元素被隐藏的情况时&#xff0c;需要先对隐藏的元素进行处理&#xff0c;才能继续进行我们的操作&#x…...

编程日记 2024/1/16 2:13:11

第三次面试总结 - 吉云集团 - 全栈开发

&#x1f9f8;欢迎来到dream_ready的博客&#xff0c;&#x1f4dc;相信您对专栏 “本人真实面经” 很感兴趣o (ˉ▽ˉ&#xff1b;) 专栏 —— 本人真实面经&#xff0c;更多真实面试经验&#xff0c;中大厂面试总结等您挖掘 目录 总结&#xff08;非详细&#xff09; 面试内…...

编程日记 2024/1/16 2:12:11

buuctf-Misc 题目解答分解118-120

118.[INSHack2017]sanity 打开压缩包就是一个md 文件 typora 打开 发现flag INSA{Youre_sane_Good_for_you} 119.粽子的来历 解压压缩包 &#xff0c;得到文件夹如下 用010 editor 打开 我是A.doc 这个有些可以 都改成FF 保存 然后再次打开 docx 文件就发现了屈原的诗 其他b…...

编程日记 2024/1/16 2:10:09

Hive数据定义（1）

hive数据定义是hive的基础知识&#xff0c;所包含的知识点有&#xff1a;数据仓库的创建、数据仓库的查询、数据仓库的修改、数据仓库的删除、表的创建、表的删除、内部表、外部表、分区表、桶表、表的修改、视图。本篇文章先介绍&#xff1a;数据仓库的创建、数据仓库的查询、…...

编程日记 2024/1/16 2:08:08

golang 反序列化出现json: cannot unmarshal string into Go value of type model.Phone

项目场景&#xff1a; 今天在项目公关的过程中&#xff0c;需要对interface{}类型进行转换为具体结构体 问题描述 很自然的用到了resultBytes, _ : json.Marshal(result)&#xff0c;然后对resultBytes进行反序列化转换为对应的结构体err : json.Unmarshal(resultBytes, &…...

编程日记 2024/1/16 2:06:06

资本可以复制流量，却复制不了《凰标》的天命@凤凰标志

——《凰标》为何无法被批量复刻&#xff1f;一、资本逻辑&#xff1a;无限复制与批量复刻可复制元素资本操作手法结果爆款剧情换皮翻拍同质化内容泛滥流量模式买量算法短期数据狂欢国风外壳元素拼贴文化“快餐”营销套路热搜话题转瞬即逝的热度 资本的核心能力&#xff0c;是复…...

编程新知 2026/5/12 22:27:25

在持续集成环境中集成Taotoken API进行自动化测试的稳定性观察

&#x1f680; 告别海外账号与网络限制&#xff01;稳定直连全球优质大模型&#xff0c;限时半价接入中。 &#x1f449; 点击领取海量免费额度 在持续集成环境中集成Taotoken API进行自动化测试的稳定性观察 1. 场景概述&#xff1a;CI/CD中的AI功能自动化测试 在现代软件开…...

编程新知 2026/5/12 21:03:38

IC场景XR全息通信_CSDN

6G IC场景XR/全息通信技术深度分析 摘要&#xff1a; 6G时代的沉浸式通信&#xff08;Immersive Communication, IC&#xff09;是实现"存在感"传输的核心场景&#xff0c;其中XR与全息通信技术对网络提出了Tbps级速率和亚毫秒级延迟的极限需求。本文从技术需求量化、…...

编程新知 2026/5/12 20:48:39

别再死记硬背了！用这5个真实数据处理场景，彻底搞懂Python列表、字典和集合

别再死记硬背了&#xff01;用这5个真实数据处理场景&#xff0c;彻底搞懂Python列表、字典和集合 当你第一次学习Python时&#xff0c;列表、字典和集合可能只是教科书上的几个定义。但真正掌握它们的关键&#xff0c;在于理解如何将这些数据结构转化为解决实际问题的工具。本…...

编程新知 2026/5/12 18:54:20

TEdit终极教程：如何用免费地图编辑器10倍提升泰拉瑞亚创作效率

TEdit终极教程&#xff1a;如何用免费地图编辑器10倍提升泰拉瑞亚创作效率 【免费下载链接】Terraria-Map-Editor TEdit - Terraria Map Editor - TEdit is a stand alone, open source map editor for Terraria. It lets you edit maps just like (almost) paint! It also let…...

编程新知 2026/5/12 18:24:14

别再只点灯了！用ESP32和WebServer库做个智能家居控制面板原型（附完整代码）

用ESP32打造智能家居控制面板&#xff1a;从网页控制到硬件交互实战 想象一下&#xff0c;清晨醒来无需下床&#xff0c;轻点手机就能打开窗帘、调节灯光&#xff1b;离家时一键关闭所有电器&#xff0c;还能实时查看家中温湿度——这些看似未来的场景&#xff0c;如今用一块ES…...

编程新知 2026/5/12 17:52:16

从数据模型到领域驱动设计：数据库抽象与微服务实践的演进

在软件开发的漫长历史中，如何有效地对现实世界进行建模，始终是核心挑战之一。从早期的层次数据库到当今的微服务架构，数据模型作为连接业务需求与技术实现的桥梁，经历了深刻的演变。本文基于对概念数据模型、基本数据模型和面向对象模型的系统探讨，进一步延伸到领域驱动设…...

编程新知 2026/5/12 17:47:53

大模型上手指南：从跑通到解剖，一步步深入核心机制！

本文提供了一套从零开始、由浅入深的实践路径&#xff0c;指导读者如何系统性地分析和学习大模型。首先通过配置环境、加载本地模型并成功进行推理&#xff0c;让读者直观感受模型运行。接着&#xff0c;结合运行结果回顾 Transformer、Tokenization 等核心概念&#xff0c;并探…...

编程新知 2026/5/12 17:21:07

大厂光环褪去后，技术人该如何评估一份工作的价值？

当“进入大厂”不再是职业发展的唯一解&#xff0c;当“稳定”成为一种奢求&#xff0c;软件测试从业者需要一套更内核的价值评估体系。这套体系不应依赖于公司的名头或短期的薪资涨幅&#xff0c;而应聚焦于那些能够被你带走、并持续产生复利的核心资产。我们可以从以下四个维…...

编程新知 2026/5/12 15:37:47

LayerDivider：如何用3步将单张插画自动分层为可编辑PSD文件？

LayerDivider&#xff1a;如何用3步将单张插画自动分层为可编辑PSD文件&#xff1f; 【免费下载链接】layerdivider A tool to divide a single illustration into a layered structure. 项目地址: https://gitcode.com/gh_mirrors/la/layerdivider 你是否曾经面对一张精…...

编程新知 2026/5/12 14:51:47