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

概述

前后端网络请求工具

  • 原生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)}
)

结果

在这里插入图片描述

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

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

5.MapReduce之Combiner-预聚合

目录 概述本地预计算 Combiner 意义实践前提代码日志观察 结束 概述 在 MR、Spark、Flink 中&#xff0c;常用的减少网络传输的手段。 通常在 Reducer 端合并&#xff0c;shuffle 的数据量比在 Mapper 端要大&#xff0c;根据业务情况及数据量极大时&#xff0c;将大幅度降低效…

Pod控制器详解

一、什么是pod控制器 Pod控制器是管理pod的中间层&#xff0c;使用Pod控制器之后&#xff0c;只需要告诉Pod控制器&#xff0c;想要多少个什么样的Pod就可以了&#xff0c;它会创建出满足条件的Pod并确保每一个Pod资源处于用户期望的目标状态。如果Pod资源在运行中出现故障&am…

Excel中快速隐藏中间四位手机号或者身份证号等

注意&#xff1a;以下方式必须再新增一列&#xff0c;配合旧的一列用来对比操作&#xff0c;即根据旧的一列的数据源&#xff0c;通过新的一列的操作逻辑来生成新的隐藏数据 1、快捷方式是使用CtrlE 新建一列&#xff1a;手动输入第一个手机号隐藏后的号码&#xff0c;即在N2单…

深入理解C#中的引用类型、引用赋值以及 `ref` 关键字

深入理解C#中的引用类型、引用赋值以及 ref 关键字 在C#编程中&#xff0c;理解引用类型、引用赋值以及 ref 关键字的使用对于编写高效、可靠的代码至关重要。本文将深入探讨这些概念&#xff0c;帮助您更好地理解C#的工作原理。 引用类型简介 在C#中&#xff0c;所有的类型都…

「Verilog学习笔记」任意奇数倍时钟分频

专栏前言 本专栏的内容主要是记录本人学习Verilog过程中的一些知识点&#xff0c;刷题网站用的是牛客网 timescale 1ns/1nsmodule clk_divider#(parameter dividor 5) ( input clk_in,input rst_n,output clk_out );parameter CNT_WIDTH $clog2(dividor - 1) ; reg flag1, f…

基于FPGA的万兆以太网学习(1)

万兆(10G) 以太网测速视频:FPGA 实现UDP万兆以太网的速度测试 1 代码结构 2 硬件需求 SFP+屏蔽笼可以插入千兆或万兆光模块。SFP+信号定义与 SFP 一致。 3 Xilinx IP 10 Gigabit Ethernet Subsystem IP说明 文章链接: Xilinx IP 10 Gigabit Ethernet Subsystem IP 4 E…

springboot项目创建及采用本地tomcat打包发布

springboot项目发布 maven使用 解压maven安装包 修改配置文件settings.xml 更改镜像(使用maven添加依赖时&#xff0c;选择下载的地址&#xff0c;百度云已提供) <mirror><id>nexus-aliyun</id><mirrorOf>*</mirrorOf><name>Nexus aliyu…

设备注册的多种方式

注册是将macOS、iOS或tvOS设备添加到Jamf Pro的过程。注册会将设备的库存信息提交给Jamf Pro&#xff0c;同时使得设备受到Jamf Pro的管理&#xff0c;这将允许您在设备上执行库存任务以及远程管理和配置任务。针对不同的设备类型&#xff0c;Jamf Pro提供了多种注册方式。 针对…

【数字图像处理】水平翻转、垂直翻转

图像翻转是常见的数字图像处理方式&#xff0c;分为水平翻转和垂直翻转。本文主要介绍 FPGA 实现图像翻转的基本思路&#xff0c;以及使用紫光同创 PGL22G 开发板实现数字图像水平翻转、垂直翻转的过程。 目录 1 水平翻转与垂直翻转 2 FPGA 布署与实现 2.1 功能与指标定义 …

Java学习笔记-day05-响应式编程初探-自定义实现Reactive Streams规范

最近在学响应式编程&#xff0c;这里先记录下&#xff0c;响应式编程的一些基础内容 1.名词解释 Reactive Streams、Reactor、WebFlux以及响应式编程之间存在密切的关系&#xff0c;它们共同构成了在Java生态系统中处理异步和响应式编程的一系列工具和框架。 Reactive Streams…

线性代数——(期末突击)矩阵(下)-习题篇(初等变换求逆矩阵、矩阵乘法、求矩阵方程、求线性方程组、解齐次线性方程组)

目录 初等变换求逆矩阵 矩阵乘法 求矩阵方程 求线性方程组 解齐次线性方程组 带有未知数的方程组 初等变换求逆矩阵 如果,则A可逆&#xff0c;且 例题&#xff1a; &#xff0c;求A的逆矩阵。 矩阵乘法 求AB&#xff0c;BA. 矩阵之间的乘法是行乘以列&#xff0c;以这…

2024年全国教资笔试报名流程(建议电脑报名),看看有啥新要求?

一.报名、考试时间节点 1.笔试报名时间: 2024年1月12日-15日 2.笔试考试时间:2024年3月9日 3.笔试成绩查询时间:2024年4月15日 4.面试报名时间:2024年4月15日 5.面试考试时间:2024年5月18日 6.面试成绩查询时间:2024年6月14日 二.笔试报名流程: 登陆→考生注册 →填报个…

git打tag以及拉取tag

场景&#xff1a;某次git代码发布后定版记录&#xff0c;将发版所在的commit时候代码打上tag记录&#xff0c;方便后期切换到对应tag代码位置。 查看所有tag名 git tag// 1.1.0 // 1.0.0查看tag和描述 git tag -l -n//1.0.0 云监管一期项目完结 //1.1.0 …

Android BUG 之 Error: Activity class {} does not exist

项目场景&#xff1a; 更换包名&#xff0c;运行报错 问题描述 原因分析&#xff1a; 在替换包名的时候要确认&#xff0c;配置文件跟build中的保持一致&#xff0c;在更换后还要将旧包的缓存数据清理掉 解决方案&#xff1a; 1 替换后删除 app 下的build 文件夹 2 Rebuild Pr…

AI论文润色平台一览,让你的论文更加流畅易懂!

之前其实比较犹豫&#xff0c;是否应该整理一篇关于可辅助论文写作的在线平台的文章。因为论文这个事情&#xff0c;更重要的是要有个人的思考&#xff0c;要亲自动手写&#xff0c;这涉及到诚信的问题。然而&#xff0c;通过AI直接生成的论文可能很难通过查重和AI检测&#xf…

STM32F103C8T6(HAL库函数 - 内部Flash操作)

简介 STM32F103C8T6 内部Flash 为 64KB&#xff0c;本次将对他多余空间进行读写。 介绍 数据手册下载 STM32F103x8/STM32F103xB 数据手册 包含Flash Memory Page分布 STM32F设备命名 设备容量类型 中容量类型 内部空间介绍 64 KBytes大小Flash Memory 从 0x0800 0000 ~…

理解接雨水算法

一、IDEA注释显示图片 在做题时&#xff0c;需要对照这图片&#xff0c;才能更好的梳理思路。 首先&#xff0c;注释里添加<img/>标签 之后&#xff0c;将鼠标光标放置在需要以阅读模式预览注释的地方&#xff0c;然后按快捷键CtrlAltQ即可 二、接雨水算法 先看接雨水…

apt和apt-get的区别

文章目录 环境问题背景区别进度条显示可更新包的数量upgrade 对比apt-get 过时了吗使用apt还是apt-get总结参考 环境 RHEL 9.3Docker Community 24.0.7Ubuntu Docker image jammy 22.04lunar 23.04 Ubuntu 22.04 问题 apt 和 apt-get 有一些相似之处。比如&#xff0c;如果想…

Vue-9、Vue事件修饰符

1、prevent 阻止默认事件 <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><title>事件修饰符</title><!--引入vue--><script type"text/javascript" src"https://cdn.jsdeliv…

Native Crash回溯栈

获取调用栈四种方案&#xff1a;Android Native Crash 收集 1、使用系统的<unwind.h>库 可以获取到出错文件与函数名。只不过需要自己解析函数符号&#xff0c;同时经常会捕获到系统错误&#xff0c;需要手动过滤。 2、libcorkscrew 在4.1.1以上&#xff0c;5.0以下&…