fetch怎么使用

fetch 是一个现代、强大的、基于 Promise 的网络请求 API,用于在浏览器中发起网络请求(如异步获取资源)。它提供了一种更加简洁和灵活的方式来替代 XMLHttpRequest。下面是 fetch 的基本使用方法和一些示例。

基本语法

fetch(url, options).then(response => {// 处理响应if (!response.ok) {throw new Error('Network response was not ok');}return response.json(); // 或者 response.text(), response.blob() 等,取决于你需要的数据类型}).then(data => {// 处理响应数据console.log(data);}).catch(error => {// 处理错误console.error('There was a problem with your fetch operation:', error);});

参数

  • url:要请求的资源的 URL。
  • options(可选):一个配置项对象,用于自定义请求,比如设置请求方法(GET、POST 等)、请求头(Headers)、请求体(Body)等。

示例

GET 请求
fetch('https://api.example.com/data').then(response => {if (!response.ok) {throw new Error('Network response was not ok');}return response.json();}).then(data => {console.log(data);}).catch(error => {console.error('Fetch error:', error);});
POST 请求
const url = 'https://api.example.com/items';
const data = { name: 'New Item', description: 'This is a new item.' };fetch(url, {method: 'POST', // 或者 'PUT'headers: {'Content-Type': 'application/json',},body: JSON.stringify(data),
})
.then(response => response.json())
.then(data => console.log(data))
.catch((error) => console.error('Error:', error));

注意事项

  • fetch 不会自动处理 JSON 转换,因此如果你期望获取 JSON 格式的数据,你需要在 .then() 中调用 response.json()
  • fetch 只会拒绝(reject)网络错误,而不会对 HTTP 错误状态码(如 404 或 500)进行拒绝。因此,你需要检查 response.ok(等同于 response.status >= 200 && response.status < 300)来确保请求成功。
  • fetch 遵循 CORS(跨源资源共享)策略,因此如果你从前端应用向不同源的服务器发送请求,需要确保服务器支持 CORS。
  • 默认情况下,fetch 不会发送或接收任何 cookies,也不会添加任何认证信息到请求中。如果你需要发送 cookies,需要将 credentials 选项设置为 'include'
fetch(url, {credentials: 'include',
})
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error('Error:', error));

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

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

相关文章

五种数据库特性对比(Redis/Mysql/SQLite/ES/MongoDB)

做后端开发的程序员基本都要学会数据库的相关知识。 1、关系型数据 今天就着这段时间了解大模型的事需要牵扯到是我们接触最多的、也是入门后端必学的关系型数据库。在关系型数据库中&#xff0c;数据以表的形式进行组织和存储&#xff0c;每个表就像一个 Excel 表格&#xf…

如何写一个自动化Linux脚本去进行等保测试--引言

#我的师兄喜欢给我的休闲实习生活加活&#xff0c;说是让我在实习期间写一个自动化脚本去进行等保测试。呵呵哒。 怎么办呢&#xff0c;师兄的指令得完成&#xff0c;师兄说让我使用Python完成任务。 设想如下&#xff1a; 1、将Linux指令嵌入到python脚本中 2、调试跑通 …

基于微信小程序的宠物寄养平台的设计与实现+ssm(lw+演示+源码+运行)

摘 要 随着科技和网络的进步&#xff0c;微信小程序技术与网络、生活贴和的更加紧密。需要依靠客户端的单机系统逐渐被淘汰&#xff0c;利用互联网可以处理大量数据的新型系统如雨后春笋般迅速发展起来。这类系统和信息化时代的同步发展对传统的办公管理方式造成了很大的压力。…

Linux入门学习:Git

文章目录 1. 创建仓库2. 仓库克隆3. 上传文件4. 相关问题4.1 git进程阻塞4.2 git log4.3 上传的三个步骤在做什么4.4 配置邮箱/用户名 本文介绍如何在Linux操作系统下简单使用git&#xff0c;对自己的代码进行云端保存。 1. 创建仓库 &#x1f539;这里演示gitee的仓库创建。…

华为全联接大会HUAWEI Connect 2024印象(一):OpenEuler

因为和华为有课程合作&#xff0c;此次应邀参加了华为全联接大会 &#xff08;HUAWEI Connect 2024&#xff09;&#xff0c;分几次分享一下自己的见闻。 HUAWEI Connect 2024的规模很大&#xff0c;不过主要面向的应该是企业市场&#xff0c;我比较关注的嵌入式系统的内容很少…

MTK zephyr平台:USB升级、枚举流程

一、USB升级流程 通过代码及log分析,当前平台升级过程在PL阶段进行 USB download相关代码 mtk/modules/hal/boot/preloader/platform/flashc/ mtk/modules/hal/boot/preloader/platform/board_name/flash/ mtk/modules/hal/boot/preloader/platform/board_name/src/drive…

Kubernetes从零到精通(11-CNI网络插件)

Kubernetes网络模型 Kubernetes的网络模型&#xff08;Kubernetes Networking Model&#xff09;旨在提供跨所有节点、Pod和服务的统一网络连接。它的核心理念是通过统一的网络通信规则&#xff0c;保证集群中的所有组件能够顺畅地相互通信。Kubernetes网络模型主要有以下几个关…

Java异常架构与异常关键字

1. Java异常简介 Java 异常是 Java 提供的一种识别及响应错误的一致性机制。 Java 异常机制可以使程序中异常处理代码和正常业务代码分离&#xff0c;保证程序代码更加优雅&#xff0c;并提高程 序健壮性。在有效使用异常的情况下&#xff0c;异常能清晰的回答 what, where,…

RabbitMQ:交换机详解(Fanout交换机、Direct交换机、Topic交换机)

♥️作者&#xff1a;小宋1021 &#x1f935;‍♂️个人主页&#xff1a;小宋1021主页 ♥️坚持分析平时学习到的项目以及学习到的软件开发知识&#xff0c;和大家一起努力呀&#xff01;&#xff01;&#xff01; &#x1f388;&#x1f388;加油&#xff01; 加油&#xff01…

ftp服务的管理及安全优化

1.ftp介绍 ftp : file transfer proto 互联中最老牌的文件传输协议 2.vsftpd安装及启用 环境 #server 主机 &#xff1a; # R3 # 192.168.10.130 # selinux 关闭 # 火墙开启 # dnf 安装设定完成 # #client 主机 &#xff1a; # R4 # 192.168.10.131 # selinux 关闭 …

【Elasticsearch系列四】ELK Stack

&#x1f49d;&#x1f49d;&#x1f49d;欢迎来到我的博客&#xff0c;很高兴能够在这里和您见面&#xff01;希望您在这里可以感受到一份轻松愉快的氛围&#xff0c;不仅可以获得有趣的内容和知识&#xff0c;也可以畅所欲言、分享您的想法和见解。 推荐:kwan 的首页,持续学…

食品安全标签检测系统源码分享

食品安全标签检测检测系统源码分享 [一条龙教学YOLOV8标注好的数据集一键训练_70全套改进创新点发刊_Web前端展示] 1.研究背景与意义 项目参考AAAI Association for the Advancement of Artificial Intelligence 项目来源AACV Association for the Advancement of Computer…

UML图之构件图例题

答案&#xff1a;C 知识点&#xff1a;构件图描述一个封装的类和它的接口&#xff0c;端口&#xff0c;以及由内嵌的构件和连接件构成的内部结构。 构件图是类图的变体 构件图又叫组件图

24年蓝桥杯及攻防世界赛题-MISC-1

2 What-is-this AZADI TOWER 3 Avatar 题目 一个恐怖份子上传了这张照片到社交网络。里面藏了什么信息?隐藏内容即flag 解题 ┌──(holyeyes㉿kali2023)-[~/Misc/tool-misc/outguess] └─$ outguess -r 035bfaa85410429495786d8ea6ecd296.jpg flag1.txt Reading 035bf…

掌握 Spring:从新手到高手的常见问题汇总

一提起Spring&#xff0c;总感觉有太多知识&#xff0c;无法详尽&#xff0c;有些基础理解就先不说了&#xff0c;相信大家都已经用过Spring了 下面简单针对常见Spring面试题做些回答 核心特性 IOC容器spring事件资源管理国际化校验数据绑定类型转换spirng表达式面向切面编程……

二叉树(二)深度遍历和广度遍历

一、层序遍历 广度优先搜索&#xff1a;使用队列&#xff0c;先进先出 模板&#xff1a; 1、定义返回的result和用于辅助的队列 2、队列初始化&#xff1a; root非空时进队 3、遍历整个队列&#xff1a;大循环while(!que.empty()) 记录每层的size以及装每层结果的变量&a…

边缘智能-大模型架构初探

R2Cloud接口 机器人注册 请求和应答 注册是一个简单的 HTTP 接口&#xff0c;根据机器人/用户信息注册&#xff0c;创建一个新机器人。 请求 URL URLhttp://ip/robot/regTypePOSTHTTP Version1.1Content-Typeapplication/json 请求参数 Param含义Rule是否必须缺省roboti…

2、StarGAN V2

2、StarGAN V2 StarGAN 论文链接&#xff1a;StarGAN StarGAN V2 论文链接&#xff1a;StarGAN V2 在介绍StarGAN V2之前&#xff0c;我们先对StarGAN有一定的了解&#xff0c;StarGAN V2只是在StarGAN的基础上做出了改进&#xff0c;基本的架构是没有变的&#xff0c;只是将…

(11)(2.1.2) DShot ESCs(二)

文章目录 前言 3 配置伺服功能 4 检查RC横幅 5 参数说明 前言 DShot 是一种数字 ESC 协议&#xff0c;它允许快速、高分辨率的数字通信&#xff0c;可以改善飞行器控制&#xff0c;这在多旋翼和 quadplane 应用中特别有用。 3 配置伺服功能 如上所述&#xff0c;如果使用…

《粮油与饲料科技》是什么级别的期刊?是正规期刊吗?能评职称吗?

问题解答 问&#xff1a;《粮油与饲料科技》是不是核心期刊&#xff1f; 答&#xff1a;不是&#xff0c;是知网收录的第一批认定 学术期刊。 问&#xff1a;《粮油与饲料科技》级别&#xff1f; 答&#xff1a;省级。主管单位&#xff1a;中文天地出版传媒集团股份有限公司…