前端面試四之Fetch API同步和異步

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