WEB前端10- Fetch API(同步/异步/跨域处理)

Fetch API

Fetch API 可以用来获取远程数据,用于在 Web 应用程序中发起和处理 HTTP 请求。它基于 Promise,提供了一种简单而强大的方式来处理网络通信,替代了传统的 XMLHttpRequest。

  • Promise对象

Promise 对象是 JavaScript 中处理异步操作的一种机制,它代表了一个异步操作的最终完成或失败,并且其结果值是可用的。

基本概念

  1. 状态(State)
    • Promise 可以处于三种状态之一:pending(进行中)、fulfilled(已成功)或 rejected(已失败)。
    • 当创建一个 Promise 对象时,它最初是 pending 状态,随后可能变为 fulfilled 或 rejected。
  2. 值(Value)
    • 当 Promise 从 pending 变为 fulfilled 时,会传递一个值作为操作成功的结果。
    • 当 Promise 从 pending 变为 rejected 时,会传递一个原因(通常是 Error 对象)作为操作失败的原因。
  3. 处理异步操作
    • Promise 对象用于处理异步操作,可以通过 .then() 方法注册成功和失败的回调函数,或者使用 .catch() 方法捕获失败的情况。
  • Fetch发起网络请求
fetch(url, options);//返回

url: 表示要获取资源的 URL 的字符串。

options: (可选)一个对象,包含配置 fetch 操作的设置,比如方法、头部、请求体、凭据等。这个参数允许精确调整请求的细节。

返回值:fetch(url, options) 函数返回一个 Promise 对象,它代表了请求的异步操作。这个 Promise 对象在请求完成后会resolve(解析),返回一个 Response 对象,或在出现网络错误时reject(拒绝),返回一个错误。

具体来说:

如果请求成功并且得到了 HTTP 状态码在 200299 之间的响应(包括 200299),`fetch()` Promise 的状态将会是 resolved,而且 `Response` 对象将作为 resolve 的值传递。如果出现网络错误,比如无法连接服务器或者请求超时,`fetch()` Promise 的状态将会是 rejected,并且会传递一个错误对象给 `.catch()` 方法处理。
  • 接受数据的方式

**同步方式:**后续代码不会在结果返回前执行

const response = await fetch(url, options);//获得响应对象

注意:await 关键字必须在一个标记了 async 的 function 内来使用

**异步方式:**后续代码不必等待结果返回就可以执行

fetch(url, options).then(结果 => { ... })
.then 方法:
.then() 是 Promise 对象的方法,接收一个回调函数作为参数。这个回调函数会在 Promise 对象的状态变为 resolved 时被调用。
回调函数中的 结果 参数是 Promise 对象成功解析后传递给 .then() 方法的值。结果 => { ... }:
这是一个箭头函数,或者称为回调函数,它接收一个参数 结果,这个参数是 Promise 解析后的值。
大括号 { ... } 中包含了具体要执行的操作或逻辑。
  • 跨域问题

image-20220814105448882

跨域原因:

跨域问题的出现主要是由于浏览器的同源策略(Same-Origin Policy)限制所导致的。同源策略是一种安全机制,旨在防止一个网页上的脚本获取另一个网页的数据。具体来说,同源策略要求网页中的所有资源(如脚本、样式表和 AJAX 请求)必须来自同一个域、协议和端口,否则就会出现跨域问题。

以下是导致跨域问题的主要原因:

  1. 不同域名: 当浏览器发起请求的源(Origin)与资源所在服务器的域名不一致时,就会发生跨域请求。例如,从 http://domain1.com 发起请求访问 http://domain2.com 上的资源。
  2. 不同子域名: 即使是同一个顶级域名,不同子域名之间也被视为不同的源。例如,http://sub1.domain.comhttp://sub2.domain.com 之间的请求就属于跨域请求。
  3. 不同协议: 当浏览器中的页面由 http:// 协议访问,而请求的资源是通过 https:// 协议提供时,也会遇到跨域问题。
  4. 不同端口: 即使是同一域名下的不同端口,例如从 http://domain.com:3000 访问 http://domain.com:4000 的资源,也会被浏览器视为跨域请求。
  5. 安全策略限制: 除了同源策略,浏览器还会根据安全策略(如 Content Security Policy)对跨域请求进行限制和防范,这也可能导致跨域问题的出现。

解决方案:

1.响应头解决方案

跨域请求的主要机制之一是使用响应头来进行控制和验证。当浏览器发起跨域请求时,例如从 http://localhost:7070http://localhost:8080 发送请求,浏览器会在请求中携带一个 Origin 头,表明请求的源自何处。

服务器端可以通过设置 Access-Control-Allow-Origin 头来响应这个请求。例如,如果服务器允许来自 http://localhost:7070 的请求访问资源,可以设置响应头如下:

image-20220814144040703

response.addHeader("Access-Control-Allow-Origin", "http://localhost:7070");

这样浏览器就可以根据响应头确定是否允许将响应传递给请求的页面。

2.代理解决方案

另一个常见的跨域解决方案是使用代理。代理服务器充当客户端和目标服务器之间的中介,它接收来自客户端的请求,然后将请求转发给目标服务器,并将目标服务器的响应返回给客户端。

image-20220814161532141

在 Node.js 的 Express 框架中,可以使用 http-proxy-middleware 中间件来设置代理。下面是如何配置和使用该中间件的示例代码:

首先,安装 http-proxy-middleware

npm install http-proxy-middleware --save-dev

然后,在 Express 服务器的启动代码中加入如下配置:

import { createProxyMiddleware } from 'http-proxy-middleware';
const express = require('express');
const app = express();// 设置代理,将请求转发到目标服务器
app.use('/api', createProxyMiddleware({ target: 'http://localhost:8080', changeOrigin: true }));// 其他 Express 中间件和路由设置
// ...// 启动 Express 服务器
app.listen(7070, () => {console.log('Express server is running on http://localhost:7070');
});

这段代码将会把所有以 /api 开头的请求都代理到 http://localhost:8080,并且将 Origin 头设置为当前的源。

最后,需要确保在客户端的 Fetch 请求中正确使用代理路径。例如,将之前的 Fetch 请求:

const resp = await fetch('http://localhost:7070/api/students');

修改为使用代理路径:

const resp = await fetch('/api/students');

这样客户端代码就会自动将请求发送到 http://localhost:7070/api/students,并通过代理转发到目标服务器上。

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

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

相关文章

0723,UDP通信(聪明小辉聪明小辉),HTTP协议

我就是一个爱屋及乌的人!!!! #include "network_disk_kai.h" 昨天的epoll: 可恶抄错代码了 epoll_s.csockect return listenfdsetsockoptsockaddr_in bind listenfd & serveraddr…

Ubuntu 中默认的 root 用户密码

场景:想要切换root用户,发现得输入密码,以为是以前设置过然后一直尝试都是错误【认证失败】最后发现根本没设置过root用户,默认会随机生成root用户的密码😅 Ubuntu 中默认的 root 密码是随机的,即每次开机都…

用51单片机或者stm32能否开发机器人呢?

在开始前刚好我有一些资料,是我根据网友给的问题精心整理了一份「单片机的资料从专业入门到高级教程」, 点个关注在评论区回复“888”之后私信回复“888”,全部无偿共享给大家!!!能的。但是由于单片机和st…

MATLAB练习题——矩阵(2)

逻辑运算 a [5 0.2 0 -8 -0.7 ],在进行逻辑运算时,a 相当于什么样的逻辑量。 相当于 a[1 1 0 1 1] 角度运算 在 sin(x)运算中,x 是角度还是弧度? 在 sin(x)运算中,x 是弧度,MATLAB 规定所有…

盘点2024年大家都在使用的AI智能写作工具

在科技发达的现在社会,AI已经悄悄的渗入我们生活的各种角落。不知道你有没有尝试过用ai智能写作来完成一些文章创作呢?这次我介绍几个可以提升效率的ai智能写作工具给你试试吧。 1.笔|灵AI写作 CSDN 传送门:https://ibiling.cn…

OpenAI发布GPT-4 Mini的深度分析及中国大模型的弯道超车机会

引言 在OpenAI封禁中国IP访问其API后,紧接着推出了GPT-4 Mini,这是一个引发广泛关注和讨论的新举措。此举不仅让人们质疑OpenAI的战略方向,更引发了对中国大模型是否能弯道超车的讨论。本文将详细分析GPT-4 Mini的特点、市场影响及中国大模型…

谷粒商城实战笔记-50-51-商品分类的删除

文章目录 一,50-商品服务-API-三级分类-删除-逻辑删除1,逻辑删除的配置1.1 配置全局的逻辑删除规则(可省略)1.2 配置逻辑删除Bean(可省略)1.3 Bean相应字段上加上注解TableLogic 2,后台接口开发…

分享:大数据信用报告查询平台哪个好?

大数据信用也就是我们常说的大数据,相信很多朋友对这个词都不陌生,特别是在银行申贷的时候,听过比较多,因为在银行做信用贷款的时候都会审查申贷人的大数据信用,贷前提前了解自己的大数据很有必要,那大数据…

基于Java+SpringMvc+Vue技术的慈善捐赠平台设计与实现(源码+LW+部署讲解)

项目含有源码、文档、PPT、配套开发软件、软件安装教程、项目发布教程、包运行成功以及课程答疑! 软件开发环境及开发工具: 操作系统:Windows 10、Windows 7、Windows 8 开发语言:java 前端技术:JavaScript、VUE.j…

列举excel中调整行高列宽的五种方法

列举excel中调整行高列宽的五种方法 在Excel中调整行高列宽的方法有以下五种: 使用鼠标手动调整行高列宽:将鼠标悬停在行或列的边界上,光标会变成双向箭头,此时按住鼠标左键并拖动边界即可调整行高或列宽。 使用快捷键调整行高列…

工具(linux)

Yum 软件包管理器 介绍 yum Yum 是一个在 Red Hat 和 CentOS 等 Linux 发行版中常用的软件包管理器,它可以方便地进行软件包的安装、更新和删除。 安装软件包 使用 yum install 命令可以安装指定的软件包,例如: yum install package_nam…

“论软件测试中缺陷管理及其应用”写作框架,软考高级论文,系统架构设计师论文

原创范文 软件缺陷指的是计算机软件或程序中存在的某种破坏正常运行能力的问题、错误,或者隐藏的功能缺陷。缺陷的存在会导致软件产品在某种程度上不能满足用户的需要。在目前的软件开发过程中,缺陷是不可避免的。软件测试是发现缺陷的主要手段&#xf…

【北航主办丨本届SPIE独立出版丨已确认ISSN号】第三届智能机械与人机交互技术学术会议(IHCIT 2024,7月27)

由北京航空航天大学指导,北京航空航天大学自动化科学与电气工程学院主办,AEIC学术交流中心承办的第三届智能机械与人机交互技术学术会议(IHCIT 2024)将定于2024年7月27日于中国杭州召开。 大会面向基础与前沿、学科与产业&#xf…

路由表与IP数据报转发:基础小白指南

目录 1. 路由表的基本概念 2. 路由表中的默认路由 3. IP数据报的转发流程 4. 路由聚合 5. 最长前缀匹配 总结 在网络世界中,IP数据报的转发是如何进行的? 这篇文章将带你深入了解路由表的基本概念和IP数据报的转发流程。我们会用简洁明了的语言和实…

nodejs启动项目报错 Error: listen EACCES: permission denied 0.0.0.0:5000

nodejs启动项目报错 Error: listen EACCES: permission denied 0.0.0.0:5000,截图如下: 解决方法 在管理员权限下打开 CMD(命令行)并运行: net stop winnatnet start winnat 执行完成后在此通过nodejs启动项目即可…

centos系统mysql数据库差异备份与恢复

文章目录 差异备份mysql数据一、 安装 Percona XtraBackup数据库中创建一些数据三、创建全备份四、创建差异备份1. 在数据库中添加数据,让数据发生一些改变2. 创建第一个差异备份3. 数据库中再次添加一些数据4. 创建第二个差异备份 五、模拟数据丢失,删库…

minio 服务docker配置

用minio docker配置了一个服务,分享链接始终是127.0.01开始的, 改成docker的host的ip则提示签名不匹配, 好在这个文件主要是用来下载的,所以可以通过设置bucket的匿名访问权限来实现下载; 这样不需要后面的地址参数就…

UM960硬件设计,最小系统推荐设计

备注: l L1:推荐使用 0603 封装的 68 nH 射频电感l C1:推荐使用 100 nF 100 pF 两个电容并联l C2:推荐使用 100 pF 电容l C3:推荐使用 n 10 μF 1 100 nF 电容并联,总容值不小于 30 μFl R1&#xff1…

Mysql sql技巧与优化

1、解决mysql同时更新、查询问题 2、控制查询优化 hint 3、 优化 特定类型的查 优化 COUNT() 查询 使用 近似值 业务能接受近似值的话,使用explain拿到近似值 优化关联查询 优化子查询 4、优化group by和distinct 优化GROUP BY WITH ROLLUP 5、优化 limit分页 其他…

AI智能名片微信小程序在品牌战略与私域流量构建中的应用与深度探索

摘要:在数字经济时代,私域流量的价值日益凸显,成为企业和个人实现可持续增长的重要驱动力。品牌,作为私域流量的核心,其稳定性和影响力直接关系到流量的质量与转化效率。AI智能名片微信小程序,作为数字营销…