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,一经查实,立即删除!

相关文章

阿里云OSS对象存储的项目实战操作

目录 一.什么是阿里云OSS? 二.阿里云OSS的使用: 1.导入依赖到 pom.xml 配置文件: 2.在application.yml配置文件中配置OSS的相关信息: 3.在properties包下创建OSS的配置属性类来封装配置文件的配置项: 4.在utils包…

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…

090、Python 写Excel文件及一些操作(使用xlwt库)

要写Excel文件,我们需要使用第三方库。 xlwt库是一个常用的写Excel的第三方库,它同时支持.xls和.xlsx。 要使用第三方库,首选需安装: pip install xlwt xlutils安装完成后,我们就可以引入库来进行相关操作了。 使用…

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

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

[rustlings]23_conversions

文章目录 from_into.rsfrom_str.rsas_ref_mut.rstry_from_into.rs from_into.rs // The From trait is used for value-to-value conversions. If From is // implemented, an implementation of Into is automatically provided. // You can read more about it in the docum…

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

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

AI学习指南机器学习篇-t-SNE模型应用与Python实践

AI学习指南机器学习篇-t-SNE模型应用与Python实践 在机器学习领域,数据的可视化是非常重要的,因为它可以帮助我们更好地理解数据的结构和特征。而t-SNE(t-distributed Stochastic Neighbor Embedding)是一种非常强大的降维和可视…

星环科技推出知识库产品 AI PC时代数据交互方式变革

随着企业业务的快速发展,数据量呈爆炸式增长,有效的知识管理成为企业面临的重要问题。企业遇到的普遍问题是大量的结构化、半结构化数据存储在不同的系统中,需要用多种计算机语言进行检索。而大模型彻底改变了人们和数据的交互方式&#xff0…

深入解析:SPI与I2C通信协议的性能比较(内附资料)

在嵌入式系统中,SPI(串行外设接口)和I2C(互连集成电路)是两种广泛使用的通信协议。它们各自具有独特的性能特点和应用场景。本文将深入解析这两种通信协议,并在STM32微控制器上进行性能比较。 1. 引言 SP…

大数定理与中心极限定理

目录 两者的定义 大数定律 中心极限定理 关系与区别 切比雪夫大数定律、伯努利大数定律和辛钦大数定律的具体应用场景和条件是什么? 切比雪夫大数定律 伯努利大数定律 辛钦大数定律 应用场景: 条件: 中心极限定理在实际统计学研究…

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

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

【JS逆向课件:第十六课:Scrapy基础2】

ImagePipeLines的请求传参 环境安装:pip install Pillow USER_AGENT Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/98.0.4758.109 Safari/537.36需求:将图片的名称和详情页中图片的数据进行爬取&a…

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

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

vue的this.$forceUpdate()和this.$set()

目录 this.$forceUpdate() 下面举个例子: 改变数组的7种方法: this.$set() 基本用法: 向对象添加属性 向数组添加属性 总的来说: this.$forceUpdate() 使用this.$forceUpdate()可以强制组件重新渲染。在Vue.js中&#xff0…

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

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

工具(linux)

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