Fetch API（Fetch Application Programming Interface）是一个现代的、基于Promise的网络请求接口，用于在浏览器环境中发起网络请求并处理响应。它是对传统XMLHttpRequest的改进，提供了更简洁、灵活和强大的功能，广泛应用于前端开发中。

1. Fetch API 的基本概念

Fetch API 是一个用于从网络获取资源的接口，它提供了一个全局的fetch()方法，该方法返回一个Promise对象。通过fetch()方法，开发者可以轻松地发送HTTP请求，获取服务器的响应，并处理返回的数据。

Fetch API 的设计目标是提供一个更简洁、更灵活的网络请求方式，同时支持现代的异步编程模式（基于Promise）。它支持多种HTTP方法（如GET、POST、PUT、DELETE等），并且可以处理各种类型的响应数据（如JSON、文本、Blob等）。

2. Fetch API 是异步的

Fetch API 是异步的，主要原因如下：

  • 网络请求的特性：网络请求需要时间来完成，浏览器需要等待服务器响应。如果网络请求是同步的，那么在请求完成之前，浏览器的主线程会被阻塞，导致页面无法响应用户的其他操作，这会严重影响用户体验。

  • 基于 Promise 的设计：Fetch API 返回一个 Promise 对象。Promise 是 JavaScript 中用于处理异步操作的机制，它允许在不阻塞主线程的情况下处理异步任务。

2.1.异步操作的典型代码

fetch('https://api.example.com/data').then(response => {if (!response.ok) {throw new Error(`HTTP error! Status: ${response.status}`);}return response.json();}).then(data => {console.log(data); // 处理返回的数据}).catch(error => {console.error('Fetch error:', error);});

在这个例子中：

  • fetch() 发起一个网络请求，并立即返回一个 Promise。

  • .then() 方法用于处理 Promise 的成功结果。

  • .catch() 方法用于处理 Promise 的失败结果。

  • 浏览器不会等待 fetch() 完成，而是继续执行后续代码。当网络请求完成时，Promise 会触发 .then() 或 .catch() 中的回调函数。

2.2. 使用 async/await 让异步操作看起来像同步 

虽然 Fetch API 是异步的，但可以通过 async/await 语法让代码看起来像是同步的。async/await 是 JavaScript 中处理异步操作的一种更简洁的方式，它基于 Promise，但可以让代码的结构更接近同步代码。

使用 async/await 的代码
async function fetchData() {try {const response = await fetch('https://api.example.com/data');if (!response.ok) {throw new Error(`HTTP error! Status: ${response.status}`);}const data = await response.json();console.log(data); // 处理返回的数据} catch (error) {console.error('Fetch error:', error);}
}fetchData();

在这个例子中：

  • async 关键字用于声明一个异步函数。

  • await 关键字用于等待一个 Promise 完成。

  • await fetch() 会暂停函数的执行，直到 fetch() 的 Promise 完成。如果 Promise 成功，await 会返回 Promise 的结果；如果 Promise 失败，会抛出错误。

  • try...catch 用于捕获异步操作中可能抛出的错误。

虽然代码看起来像是同步的，但实际上仍然是异步的。await 只是让代码在逻辑上更直观，但它不会阻塞主线程。浏览器仍然可以在等待 fetch() 完成时执行其他任务。

 2.3. 同步操作与异步操作的区别

同步操作

  • 特点：代码按顺序执行，每一步操作必须等待前一步操作完成。

  • 问题：如果某个操作耗时较长（如网络请求），会阻塞主线程，导致页面卡顿。

异步操作

  • 特点：代码不会按顺序执行，某些操作可以在后台完成，主线程可以继续执行其他任务。

  • 优点：不会阻塞主线程，用户体验更好。

3. Fetch API 的基本用法

3.1 基本语法

fetch(url, options).then(response => {// 处理响应}).catch(error => {// 处理错误});

  • url：请求的资源地址，通常是字符串形式的URL。

  • options：可选参数，用于配置请求的细节，例如请求方法、请求头、请求体等。

 4. 浏览器同源检查（Same-Origin Policy）

4.1 什么是同源策略？

同源策略（Same-Origin Policy）是浏览器的一种安全机制，用于限制不同来源（origin）的文档或脚本之间的交互。它旨在防止恶意网站窃取用户数据或干扰其他网站的正常运行。

“同源”是指两个资源的协议（protocol）、域名（domain）和端口号（port）完全相同。如果这三个部分有任何一个不同，就被视为跨域。

例如：

  • 同源：http://example.com 和 http://example.com/path 是同源的，因为它们的协议、域名和端口号都相同。

  • 跨域：http://example.com 和 https://example.com 是跨域的，因为协议不同（http vs https）。

  • 跨域：http://example.com 和 http://sub.example.com 是跨域的，因为域名不同（example.com vs sub.example.com）。

  • 跨域：http://example.com 和 http://example.com:8080 是跨域的，因为端口号不同（默认端口80 vs 8080）。

4.2 同源策略的作用

  1. 保护用户隐私：防止恶意网站通过脚本访问其他网站的敏感信息（如用户的登录状态、个人数据等）。

  2. 防止XSS攻击：限制不同来源的脚本之间的交互，避免恶意脚本注入。

  3. 防止CSRF攻击：确保只有同源的请求可以操作敏感数据。

 5. 跨域（Cross-Origin）

5.1 什么是跨域？

跨域是指两个资源的来源（origin）不同。当一个网页尝试与另一个来源的资源交互时，就会触发跨域问题。由于同源策略的限制，浏览器会阻止这种跨域操作。

5.2 跨域的常见场景

  1. 跨域AJAX请求：尝试从一个域向另一个域发起HTTP请求。

5.3 解决跨域问题的方法 

5.3.1请求响应头解决跨域问题

通过在服务器端设置特定的HTTP响应头，允许浏览器从特定的源（或所有源）访问资源。这种方法基于浏览器的CORS（跨域资源共享）机制。

关键响应头

  • Access-Control-Allow-Origin：指定允许跨域请求的域名。可以设置为具体域名（如http://example.com），也可以设置为*（允许所有域名）。

  • Access-Control-Allow-Methods：指定允许的HTTP方法（如GET, POST, PUT, DELETE）。

  • Access-Control-Allow-Headers：指定允许的请求头。

  • Access-Control-Allow-Credentials：指定是否允许携带Cookie等认证信息。如果设置为true，Access-Control-Allow-Origin不能为*。

  • Access-Control-Max-Age：指定预检请求结果的缓存时间。

以下是一个Node.js服务器的示例，展示如何设置响应头以允许跨域请求：

const http = require('http');
const server = http.createServer((req, res) => {res.writeHead(200, {'Access-Control-Allow-Origin': 'http://example.com', // 允许特定域名访问'Access-Control-Allow-Methods': 'GET, POST, PUT, DELETE','Access-Control-Allow-Headers': 'Content-Type, Authorization','Access-Control-Allow-Credentials': 'true'});res.end('hello world');
});
server.listen(3000);

5.3.2 代理解决跨域问题

通过设置一个同域的代理服务器，将前端的跨域请求转发到目标服务器。浏览器认为请求是同源的，从而绕过跨域限制。

1.使用Nginx作为代理服务器

server {listen 80;server_name yourdomain.com;location /api/ {proxy_pass http://backend-server:3000/;  # 转发到后端服务proxy_set_header Host $host;proxy_set_header X-Real-IP $remote_addr;}
}

  • 说明：前端请求/api路径时，Nginx会将请求代理到目标服务器。

2.使用Node.js中间件 

const express = require('express');
const { createProxyMiddleware } = require('http-proxy-middleware');
const app = express();app.use('/api', createProxyMiddleware({target: 'http://example.com',changeOrigin: true
}));app.listen(3000);

  • 说明：所有发送到/api的请求都会被代理到http://example.com。

总结

  • 请求响应头解决跨域问题：通过服务器端设置CORS响应头，适用于需要灵活控制跨域策略的场景。

  • 代理解决跨域问题：通过代理服务器转发请求，适用于开发环境或需要统一管理跨域请求的场景。

6.面试问题 

1.什么是同源策略？为什么要设置同源策略？

同源策略是一种浏览器的安全机制，它要求只有当协议、域名和端口号完全相同的两个页面才能互相访问DOM或发起AJAX请求。它的主要目的是防止恶意网站通过脚本访问其他网站的敏感信息，从而保护用户的隐私和网站的安全。

2. 什么是跨域？常见的跨域场景有哪些？

跨域是指两个资源的来源不同，例如协议、域名或端口号不同。常见的跨域场景包括：从一个域向另一个域发起AJAX请求、嵌入不同源的资源（如图片、脚本、样式表等），以及尝试访问嵌入页面（如iframe）的DOM。

3. 如何解决跨域问题？

解决跨域问题的方法有多种：

  • JSONP：通过动态创建<script>标签来加载跨域资源，适用于GET请求。

  • CORS：通过在服务器响应中添加Access-Control-Allow-Origin等HTTP头来允许跨域请求。

  • 代理服务器：通过设置一个同域的代理服务器，将跨域请求转发到目标服务器。

  • 文档域：适用于主域相同但子域不同的情况，通过设置document.domain来实现跨域。

4. 什么是CORS？它是如何工作的？

CORS是一种跨域解决方案，允许服务器通过HTTP头明确指定哪些外部域可以访问其资源。当浏览器发起跨域请求时，会在请求中添加Origin头。服务器检查这个头，决定是否允许请求。如果允许，服务器会在响应中添加Access-Control-Allow-Origin头，指定允许的来源。 

5.在vue项目中最常用的一种解决跨域方式是什么 ？

在 Vue 项目中，最常用且推荐的解决跨域问题的方式是通过 代理服务器。这种方式简单高效，尤其适合开发环境，因为它不需要修改后端代码，也不需要在前端代码中添加额外的跨域处理逻辑。 

1. 使用 Vue CLI 的代理功能

Vue CLI 提供了一个非常方便的代理功能，可以在开发环境中轻松解决跨域问题。它基于 Webpack 的 devServer.proxy 配置，允许你将特定的请求转发到目标服务器。

配置步骤

  1. 在 vue.config.js 中配置代理 如果你的 Vue 项目使用了 Vue CLI，可以在项目的根目录下创建或修改 vue.config.js 文件，添加代理配置。

    // vue.config.js
module.exports = {devServer: {proxy: {'/api': {target: 'http://example.com', // 目标服务器地址changeOrigin: true, // 允许跨域pathRewrite: {'^/api': '' // 重写路径，去掉/api前缀}}}}
};

    在这个配置中：

  2. /api 是前端请求的路径前缀。

  3. target 是目标服务器的地址。

  4. changeOrigin 设置为 true，可以避免跨域问题。

  5. pathRewrite 用于重写路径，去掉 /api 前缀，这样目标服务器不会收到 /api 路径。

2.前端代码中的请求 

在前端代码中，你可以直接使用 /api 作为请求路径，Vue CLI 会自动将其转发到目标服务器。

// 使用 fetch 或 axios 发起请求
fetch('/api/data').then(response => response.json()).then(data => console.log(data)).catch(error => console.error(error));

或者使用 axios：

import axios from 'axios';axios.get('/api/data').then(response => console.log(response.data)).catch(error => console.error(error));

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如若转载，请注明出处：http://www.pswp.cn/bicheng/83926.shtml
繁体地址，请注明出处：http://hk.pswp.cn/bicheng/83926.shtml
英文地址，请注明出处：http://en.pswp.cn/bicheng/83926.shtml

如若内容造成侵权/违法违规/事实不符，请联系英文站点网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

ubuntu 20.04挂载固态硬盘

ubuntu 20.04挂载固态硬盘

我们有个工控机&#xff0c;其操作系统是ubuntu 20.04。可以接入一个固态硬盘。将固态硬盘插好后&#xff0c;就要进行挂载。在AI的指导下&#xff0c;过程并不顺利。记录如下&#xff1a; 1、检查硬盘是否被识别 安装好硬盘后&#xff0c;运行以下命令来检查Linux系统是否…
阅读更多...
涂装协作机器人：重新定义涂装工艺的智能化未来

涂装协作机器人：重新定义涂装工艺的智能化未来

一、涂装场景的产业变革与核心诉求 1.1 千亿级市场的技术突围战 在汽车制造领域&#xff0c;涂装车间被称为"工业化妆间"&#xff0c;其工艺质量直接影响产品溢价能力。当前行业面临三重挑战&#xff1a; 质量维度&#xff1a;传统人工喷涂存在膜厚波动15μm的行业…
阅读更多...
Unity优化篇之DrawCall

Unity优化篇之DrawCall

当然可以&#xff01;以下是完整、详尽、可发布的博客文章&#xff0c;专注讲解 Unity 的静态合批与动态合批机制&#xff0c;并详细列出它们对 Shader 的要求和所有限制条件。文章结构清晰、技术深度足够&#xff0c;适合发布在 CSDN、掘金、知乎等技术平台。 urp默认隐藏动态…
阅读更多...
Electron桌面应用下，在拍照、展示pdf等模块时，容易导致应用白屏

Electron桌面应用下，在拍照、展示pdf等模块时，容易导致应用白屏

Electron 应用白屏问题分析与解决方案 Electron 应用中拍照、PDF展示等模块导致白屏的常见原因通常与内存泄漏、渲染进程崩溃或资源加载超时有关。以下是具体排查与解决方法&#xff1a; 检查内存泄漏 项目中&#xff0c;分析代码&#xff0c;高频操作或未释放的资源可能导致…
阅读更多...
比对++Hex or Bin文件

比对++Hex or Bin文件

用NotePad 安装 ​​ Hex-Editor 插件 1.1参考方法路径https://cloud.tencent.com/developer/article/2311013 1.2 下载 Hex-Editor.dll文件路劲 https://sourceforge.net/projects/npp-plugins/ 比对 2.1, 显示Bin 插件/Hex Editor/View in Hex 2.2 插件/Compare(运行很不流…
阅读更多...
以STM32H7微控制器为例，简要说明stm32h7xx_it.c的作用

以STM32H7微控制器为例，简要说明stm32h7xx_it.c的作用

在STM32开发中&#xff0c;stm32h7xx_it.c文件是中断服务例程&#xff08;ISR, Interrupt Service Routine&#xff09;的核心实现文件&#xff0c;其作用与产生的逻辑如下&#xff1a; 一、文件的核心作用 中断处理入口 该文件定义了STM32H7微控制器所有硬件中断和异常的处理函…
阅读更多...
若依框架页面缓存查询条件后，切换页面想重新请求一下数据

若依框架页面缓存查询条件后，切换页面想重新请求一下数据

因为框架使用了Keep-Alive缓存组件&#xff0c;所以使用onActivated钩子 import { onActivated } from vue;// 当组件从缓存中重新激活时 onActivated(() > {getList(); });
阅读更多...
智能心理医疗助手开发实践：从技术架构到人文关怀——CangjieMagic情感医疗应用技术实践

智能心理医疗助手开发实践：从技术架构到人文关怀——CangjieMagic情感医疗应用技术实践

作为一名长期耕耘在医疗健康领域的技术开发者&#xff0c;我至今仍清晰地记得三年前那个深夜——当我调试的心理健康AI第一次对用户的情绪崩溃做出恰当回应时&#xff0c;整个团队爆发的欢呼声。那一刻&#xff0c;我深刻意识到技术不只是冰冷的逻辑&#xff0c;更可以成为温暖…
阅读更多...
汉诺塔问题深度解析

汉诺塔问题深度解析

汉诺塔问题深度解析 一、汉诺塔问题的起源与背景1.1 问题起源1.2 历史发展 二、汉诺塔问题的描述与规则2.1 问题描述2.2 示例说明 三、汉诺塔问题的递归求解原理3.1 递归思想概述3.2 汉诺塔问题的递归分解3.3 递归调用栈分析 四、汉诺塔问题的多语言实现4.1 Python实现4.2 C实现…
阅读更多...
【Node.js 深度解析】npm install 遭遇：npm ERR! code CERT_HAS_EXPIRED 错误的终极解决方案

【Node.js 深度解析】npm install 遭遇：npm ERR! code CERT_HAS_EXPIRED 错误的终极解决方案

目录 &#x1f4da; 目录&#xff1a;洞悉症结&#xff0c;精准施治 &#x1f50d; 一、精准剖析&#xff1a;CERT_HAS_EXPIRED 的本质 &#x1f575;️ 二、深度溯源&#xff1a;证书失效的 N 重诱因 &#x1f4a1; 三、高效解决策略&#xff1a;六脉神剑&#xff0c;招招…
阅读更多...
【SpringBoot自动化部署】

【SpringBoot自动化部署】

SpringBoot自动化部署方法 使用Jenkins进行持续集成与部署 Jenkins是最常用的自动化部署工具之一&#xff0c;能够实现代码拉取、构建、测试和部署的全流程自动化。 配置Jenkins任务时&#xff0c;需要添加Git仓库地址和凭证&#xff0c;设置构建触发器&#xff08;如GitHub…
阅读更多...
动态规划-1035.不相交的线-力扣(LeetCode)

动态规划-1035.不相交的线-力扣(LeetCode)

一、题目解析 光看题目要求和例图&#xff0c;感觉这题好麻烦&#xff0c;直线不能相交啊&#xff0c;每个数字只属于一条连线啊等等&#xff0c;但我们结合题目所给的信息和例图的内容&#xff0c;这不就是最长公共子序列吗&#xff1f;&#xff0c;我们把最长公共子序列连线起…
阅读更多...
Double/Debiased Machine Learning

Double/Debiased Machine Learning

独立同步分布的观测数据 { W i ( Y i , D i , X i ) ∣ i ∈ { 1 , . . . , n } } \{W_i(Y_i,D_i,X_i)| i\in \{1,...,n\}\} {Wi​(Yi​,Di​,Xi​)∣i∈{1,...,n}}&#xff0c;其中 Y i Y_i Yi​表示结果变量&#xff0c; D i D_i Di​表示因变量&#xff0c; X i X_i Xi​表…
阅读更多...
Tailwind CSS 实战：基于 Kooboo 构建 AI 对话框页面（八）：异步处理逻辑详解

Tailwind CSS 实战：基于 Kooboo 构建 AI 对话框页面（八）：异步处理逻辑详解

在现代 Web 应用中&#xff0c;异步处理是实现流畅交互的核心技术。本文基于前几章实现的内容Tailwind CSS 实战&#xff1a;基于 Kooboo 构建 AI 对话框页面&#xff08;七&#xff09;&#xff1a;消息框交互功能添加-CSDN博客&#xff0c;深入解析 AI 对话框页面中异步逻辑的…
阅读更多...
Asp.net Core 通过依赖注入的方式获取用户

Asp.net Core 通过依赖注入的方式获取用户

思路&#xff1a;Web项目中&#xff0c;需要根据当前登陆的用户&#xff0c;查询当前用户所属的数据、添加并标识对象等。根据请求头Authorization 中token&#xff0c;获取Redis中存储的用户对象。 本做法需要完成 基于StackExchange.Redis 配置&#xff0c;参考&#xff1a;…
阅读更多...
Vue3 + UniApp 蓝牙连接与数据发送(稳定版)

Vue3 + UniApp 蓝牙连接与数据发送(稳定版)

本教程适用于使用 uni-app Vue3 (script setup) 开发的跨平台 App&#xff08;支持微信小程序、H5、Android/iOS 等&#xff09; &#x1f3af; 功能目标 ✅ 获取蓝牙权限✅ 扫描周围蓝牙设备✅ 连接指定蓝牙设备✅ 获取服务和特征值✅ 向设备发送数据包&#xff08;ArrayBu…
阅读更多...
Docker + Nginx + Logrotate 日志管理与轮换实践

Docker + Nginx + Logrotate 日志管理与轮换实践

概述与背景 Docker 容器化环境中 Nginx 日志管理的挑战Logrotate 的作用与必要性结合场景的实际需求&#xff08;如日志切割、压缩、归档&#xff09; Docker 环境下的 Nginx 日志配置 Nginx 日志路径与 Docker 数据卷映射 volumes:- ./nginx/logs:/var/log/nginxLogrotate …
阅读更多...
涂胶协作机器人解决方案 | Kinova Link 6 Cobot在涂胶工业的方案应用与价值

涂胶协作机器人解决方案 | Kinova Link 6 Cobot在涂胶工业的方案应用与价值

涂胶工业现状背景&#xff1a; 涂胶工艺在汽车制造、电子组装、航空航天等工业领域极为关键&#xff0c;关乎产品密封、防水、绝缘性能及外观质量。 然而&#xff0c;传统涂胶作业问题频发。人工操作重复性强易疲劳&#xff0c;涂胶质量波动大&#xff1b;大型涂胶器使用增加工…
阅读更多...
释放模型潜力：浅谈目标检测微调技术(Fine-tuning)

释放模型潜力：浅谈目标检测微调技术(Fine-tuning)

引言 在计算机视觉领域&#xff0c;目标检测是一项至关重要的任务&#xff0c;它不仅要识别出图像中存在哪些物体&#xff0c;还要精确地定位它们的位置。从自动驾驶汽车识别行人与车辆&#xff0c;到医疗影像辅助诊断病灶&#xff0c;再到智能安防监控异常事件&#xff0c;目标…
阅读更多...
Unreal从入门到精通之 UE4 vs UE5 VR性能优化实战

Unreal从入门到精通之 UE4 vs UE5 VR性能优化实战

文章目录 前言：准备工作UE4 vs UE5 性能对比引擎核心技术方案对比UE5 优化总结项目设置可伸缩性组设置VolumetricCloud最后前言： 最近在使用UE5制作VR项目 制作完后发现，我们的场景一直很卡顿，场景优化也做到了极致，但是帧率最高也才30+ 但是我们看到一个竞品，他的帧率竟…
阅读更多...
最新文章

Copyright @ 2022~2023