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.xdnf.cn/news/145985.html

如若内容造成侵权/违法违规/事实不符,请联系一条长河网进行投诉反馈,一经查实,立即删除!

相关文章

精密制造与质量控制:保障滚珠丝杆重载运行精度

滚珠丝杆作为精密机械传动领域的重要零部件&#xff0c;能够将旋转动力精准地转化为流畅的直线运动。在数控机床、精密制造及高度自动化生产线上扮演着不可或缺的角色。在应对温度波动、负载突变及严苛环境条件的考验中&#xff0c;都有很好的表现。那么&#xff0c;应该如何确…

Linux_openEuler_24.03部署Oracle 19c部署安装实测验证(无图形桌面-RPM模式)

前言&#xff1a; 近期对openeuler有点兴趣&#xff0c;顺带在做个开发数据仓项目&#xff0c;那就正好安装个环境做个调测&#xff0c;做个记录放上来做个备录给到大家参考。 openEuler 24.03 LTS&#xff1a;四大升级&#xff0c; 首个AI原生开源操作系统正式发布 openEuler …

2024华为杯研赛数学建模E题分析

2024华为杯数学建模E题分析如下&#xff0c;完整版本可查看最下方名片

U9多组织单据关连生单时的错误提示

开立采购退货单时&#xff0c;有以下的错误提示。从这段文字来看。生成【采购退货单】同时生成关联公司的【退回处理单】&#xff0c;检查退回处理单的单据类型是正常的。不明所以。系统商出来的错误提示一般是用来迷惑人的&#xff0c;不可尽信。 【未找到满足条件【上游推式…

Mybatis的XML实现方法

Mybatis的开发有两种方式&#xff1a; 1、注解 2、XML 使用Mybatis的注解方式&#xff0c;主要是来完成一些简单的增删改查功能。如果需要实现复杂的SQL功能&#xff0c;建议使用XML来配置映射语句&#xff0c;也就是将SQL语句写在XML配置文件中。 Mybatis的XML的实现需要以下…

最新版本TensorFlow训练模型TinyML部署到ESP32入门实操

最新版本TensorFlow训练模型TinyML入门实操 1.概述 这篇文章介绍微型嵌入式设备的机器学习TinyML&#xff0c;它们的特点就是将训练好的模型部署到单片机上运行。 2.TensorFlow深度学习原理 TensorFlow开源项目是由google研发的一个嵌入式机器学习工具&#xff0c;通过调用…

Compose动画

一、Compose动画种类和选择 1.1 选择动画API 1.采用SVG&#xff1a;AnimatedVectorDrawable 是否第三方动画框架&#xff1a;Lottie动画 2.是否需要永久播放&#xff1a;rememberInfiniteTransition 3.布局动画 在内容不同的多个可组合项之间切换 3.1 导航过渡动画&#…

154-钓鱼篇Offfice-CVE漏洞RLO隐藏压缩包释放免杀打包捆绑

#知识点&#xff1a; 1、文件名-RLO 伪装-后缀 2、压缩文件-自解压-运行 3、捆绑文件-打包加载-运行 4、Office 套件-漏洞钓鱼-CVE #文件后缀-钓鱼伪装-RLO cs生成一个exe后门 重命名为一个png反过来或者jpg反过来的名字 然后再g前面输入其他字符在g字符前面右键选择这个插入…

CUDA-事件计时方法cudaEventElapsedTime

作者&#xff1a;翟天保Steven 版权声明&#xff1a;著作权归作者所有&#xff0c;商业转载请联系作者获得授权&#xff0c;非商业转载请注明出处 实现原理 事件计时方法是CUDA编程中一种用于测量GPU内核执行时间的高效手段。其基本步骤包括&#xff1a; 创建事件&#xff1a;…

Python模拟鼠标轨迹[Python]

一.鼠标轨迹模拟简介 传统的鼠标轨迹模拟依赖于简单的数学模型&#xff0c;如直线或曲线路径。然而&#xff0c;这种方法难以捕捉到人类操作的复杂性和多样性。AI大模型的出现&#xff0c;能够通过深度学习技术&#xff0c;学习并模拟更自然的鼠标移动行为。 二.鼠标轨迹算法实…

echarts柱图

样式如下 关键代码 // html部分<div class"echarts-container" :id"echartDiv id"></div>// js部分 data() {return {myChart: null,xAxisData: [云南, 浙江, 山东, 广东, 四川, 河南, 广西, 河南, 广西],yAxisData: [{value: 230,num: {r…

超实用线程调度方法!

文章目录 前言一、实现思路二、实现实例三、实现效果 前言 你有想过这样一个问题吗&#xff1f;线程之间是如何调度的&#xff1f; 更具体点说是这样&#xff0c;有两个线程&#xff1a;线程A和线程B&#xff0c;线程B要先于线程A运行&#xff0c;或者是线程B运行了多次之后在…

2024年华为杯中国研究生数学建模竞赛F题保姆级教程思路分析

2024年中国研究生数学建模竞赛F题保姆级教程思路分析 F题题目&#xff1a;X射线脉冲星光子到达时间建模 本题目围绕脉冲星导航与X射线光子到达时间建模展开。脉冲星由于其自转稳定性和规律性&#xff0c;被认为是宇宙中精确的时钟&#xff0c;并可以用作航天器的定位和导航基…

Ubuntu 22.04 源码下载、编译

Kernel/BuildYourOwnKernel - Ubuntu Wikihttps://wiki.ubuntu.com/Kernel/BuildYourOwnKernel 一、查询当前系统内核版本 rootubuntu22:~# uname -r 5.15.0-118-generic 二、查询本地软件包数据库中的内核源码信息 rootubuntu22:~# apt search linux-source Sorting... Do…

使用Maven创建一个Java项目并在repository中使用

JDK环境&#xff1a;1.8.0_371 Maven环境 &#xff1a;Apache Maven 3.6.3 配置完成jdk和mvn后&#xff0c;进入到指定文件夹下执行如下语句&#xff1a; mvn archetype:generate -DgroupIdtop.chengrongyu -DartifactIdCyberSpace -DarchetypeArtifactIdmaven-archetype-quic…

(20)Shell脚本的书写

linux中的shell脚本&#xff0c;其实是系统中真正的命令。Shell语言写的程序不需编译.定义各种参数和变量、使用条件命令、控制结构以及其他高级特性。 一、shell脚本基本元素 1.1变量 定义&#xff1a;定义一个名称&#xff0c;将参数赋予给这个名称。就叫变量。变量名可以…

C++【类和对象】(一)

文章目录 前言1.类的定义1.1类定义格式1.2 访问限定符1.3 类域 2. 实例化2.1 实例化的概念2.2 对象大小 3.this指针结语 前言 在前文我们讲解了C基础语法知识。本文将会讲解C的类和对象。 1.类的定义 1.1类定义格式 class name {}&#xff1b;class为定义类的关键字&#x…

Linux进阶命令-rsync

作者介绍&#xff1a;简历上没有一个精通的运维工程师。希望大家多多关注作者&#xff0c;下面的思维导图也是预计更新的内容和当前进度(不定时更新)。 经过上一章Linux日志的讲解&#xff0c;我们对Linux系统自带的日志服务已经有了一些了解。我们接下来将讲解一些进阶命令&am…

erlang学习:Linux常用命令2

目录操作命令 对目录进行基本操作 相关cd切换目录之类的就直接省去了&#xff0c;以下操作中都会用到 查看当前目录下的所有目录和文件 ls 列表查看当前目录下的所有目录和文件&#xff08;列表查看&#xff0c;显示更多信息&#xff09; ls -l 或 ll 在当前目录下创建一个…

高性能并发计数器的比较

参考文档&#xff1a;https://baijiahao.baidu.com/s?id1742540809477784106&wfrspider&forpc 一、常用的并发计数方法 1、synchronized synchronized早期是一个重量级锁&#xff0c;因为线程竞争锁会引起操作系统用户态和内核态切换&#xff0c;浪费资源&#xff…