fetch怎么使用

news/2024/9/22 21:42:00/

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

基本语法

javascript">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 请求
javascript">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 请求
javascript">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'
javascript">fetch(url, {credentials: 'include',
})
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error('Error:', error));

http://www.ppmy.cn/news/1529023.html

相关文章

C语言的文件函数

此篇文章主要对C语言中的" 文件读写函数 "进行详细的刨析~通过此篇文章能够了解并学习到&#xff1a;" 字符读写函数 "&#xff0c;" 文本行读写函数 "&#xff0c;" 格式化读写函数 "&#xff0c;" 二进制读写函数 "&#…

Windows Ribbon框架

Windows Ribbon框架 本文内容 在本节中面向开发人员最低要求另请参阅 Windows Ribbon框架是一个丰富的命令表示系统&#xff0c;它提供传统 Windows 应用程序的分层菜单、工具栏和任务窗格的新式替代方法。 功能区框架的功能和外观与 Microsoft Office 2007 Fluent 用户界面类…

【环境问题】清除僵尸进程 | 深度学习任务中止但是GPU仍在占用

我一般遇到这种是本地网络意外中断了&#xff0c;程序不见了&#xff0c;但是GPU仍在占用。 1.确认GPU显存&#xff1a; 终端输入 nvidia-smi 查看显存使用情况&#xff1a; 2.查看所有进程&#xff1a; 输入fuser -v /dev/nvidia* 查看进程。如果出现bash: fuser: command no…

二手车交易管理系统的设计与实现 (含源码+sql+视频导入教程)

&#x1f449;文末查看项目功能视频演示获取源码sql脚本视频导入教程视频 1 、功能描述 二手车交易管理系统拥有两种角色 管理员&#xff1a;车辆管理、用户管理、回复管理、类别管理、品牌管理、评估查询、售后查询、需求查询、询价查询、预约管理等    用户&#xff1a;注…

vue3.5新特性

vue在2024.09.03发布了3.5正式版本&#xff0c;其中包含多方面的升级和优化 性能优化 响应式系统重构优化&#xff0c;在内存占用、性能方面均有收益 Memory Usage Improvements Given a test case with 1000 refs 2000 computeds (1000 chained pairs) 1000 effects sub…

【MySQL】MySQL索引与事务的透析——(超详解)

前言 &#x1f31f;&#x1f31f;本期讲解关于MySQL索引事务&#xff0c;希望能帮到屏幕前的你。 &#x1f308;上期博客在这里&#xff1a;【MySQL】MySQL表的增删改查&#xff08;进阶篇&#xff09;——之查询操作&#xff08;超级详解&#xff09;-CSDN博客 &#x1f308;感…

Java项目实战II基于Java+Spring Boot+MySQL的大学城水电管理系统(源码+数据库+文档)

目录 一、前言 二、技术介绍 三、系统实现 四、论文参考 五、核心代码 六、源码获取 全栈码农以及毕业设计实战开发&#xff0c;CSDN平台Java领域新星创作者&#xff0c;专注于大学生项目实战开发、讲解和毕业答疑辅导。获取源码联系方式请查看文末 一、前言 前随着高等…

后台数据管理系统 - 项目架构设计-Vue3+axios+Element-plus(0916)

接口文档: https://apifox.com/apidoc/shared-26c67aee-0233-4d23-aab7-08448fdf95ff/api-93850835 接口根路径&#xff1a; http://big-event-vue-api-t.itheima.net 本项目的技术栈 本项目技术栈基于 ES6、vue3、pinia、vue-router 、vite 、axios 和 element-plus http:/…