前端的請求如何到后端的？

作者：inkfoxer 2023-04-10 15:14:03

開發前端后端

前端可以使用各種方式提供請求，如通過地址欄、超鏈接、表單、JavaScript等方式。后端則通過Web服務器及后端程序進行處理，并將處理結果發送回前端。前端的請求是如何到后端的，一起來了解一下。

前端的請求到達后端的步驟通常如下：

前端發起請求。前端通過瀏覽器向后端發送HTTP請求，可以使用Fetch、Axios、Ajax等庫來發起請求。
前端請求傳遞給web服務器。通過網絡通信，前端請求發送給Web服務器，一般使用HTTP協議。
Web服務器接收請求并處理。Web服務器會接收到前端發送來的請求，然后根據請求URL、請求方法等信息，將請求路由到指定的后端處理程序。處理程序可以是使用Java、PHP、Python、Node.js等后端語言編寫的程序。
后端處理請求并返回響應。后端處理程序根據請求的具體類型及內容，在處理過程中可能需要讀寫數據庫、調用其他API等操作，處理完成后將返回JSON、HTML、XML等類型的響應內容。
響應傳遞給Web服務器。后端程序處理完成后，將響應內容傳遞給Web服務器。
Web服務器將響應返回給前端。Web服務器收到后端返回的響應內容后，將響應內容封裝成HTTP響應格式再返回給前端。
前端接收響應并處理。前端接收到響應內容后，通過JavaScript等語言進行解析和處理，更新用戶界面。

在這個過程中，前后端之間的數據傳輸一般是通過網絡協議完成，通常是HTTP協議。前端可以使用各種方式提供請求，如通過地址欄、超鏈接、表單、JavaScript等方式。后端則通過Web服務器及后端程序進行處理，并將處理結果發送回前端。

HTTP請求解析

HTTP請求由請求方法、請求頭、請求正文組成。

請求方法：

請求方法表示瀏覽器想要對服務器做什么，常見的有以下幾種：

GET：獲取資源，一般用于查詢操作
POST：提交數據，一般用于更新/插入操作
PUT：更新資源
DELETE：刪除資源
HEAD：獲取報文首部
OPTIONS：查詢服務器支持哪些請求方法

請求頭：

請求頭包含了關于瀏覽器、客戶端所使用的操作系統、瀏覽器版本、請求的客戶端支持什么類型等信息，常見的請求頭有以下幾種：

User-Agent：瀏覽器及操作系統信息
Accept-Encoding：瀏覽器支持的壓縮算法
Referer：表示當前請求referer請求頭字段的值指示了當前請求的上一個頁面。

請求正文：

如果是POST請求，可能會攜帶請求參數，位于請求報文的報文主體中。

以下是一個示例的HTTP請求報文：

POST /login HTTP/1.1
Host: example.com
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:96.0) Gecko/20100101 Firefox/96.0
Accept: application/json
Accept-Language: en-US,en;q=0.5
Accept-Encoding: gzip, deflate, br
Content-Type: application/x-www-form-urlencoded
Content-Length: 32
Connection: keep-alive
Referer: https://example.com/login
Cookie: sessionid=abcd1234

username=test&password=secret

在這個示例中，請求方法是POST，請求頭包含瀏覽器信息、接受的數據類型、支持的壓縮算法等信息。請求正文是一個URL編碼的數據字符串，包含了用戶名和密碼字段。

什么場景下使用Fetch？什么場景下使用Axios?

Fetch 和 Axios 都是前端常用的網絡請求庫。它們都可以用來發送網絡請求并處理相應數據，但是它們又有各自的優缺點。下面是它們的特點以及使用場景的建議：

使用 Fetch 庫的場景

Fetch 是 Window 的一個新的 API，它是一個原生的JavaScript庫，內置于現代瀏覽器中。優點如下：

原生支持 Promise，代碼更加簡潔易懂；
支持流式（ stream）傳輸，可以處理較大的響應數據；
提供了 Service Workers 支持，可以實現支持離線使用。

根據上面的優點，我們可以在以下場景使用 Fetch：

適用于現代瀏覽器，并且項目不需要考慮老版本瀏覽器的兼容性；
對于處理大響應數據，或者需要實現離線支持的項目。

因為 Fetch 不支持跨域的會話 Cookies，因此它的失敗率也會比較高，此外，Fetch 的請求頭不能手動設置，需要通過 Headers 對象設置，因此在一些場景下使用可能會比較麻煩，需要自己封裝一些方法來使用。

使用 Axios 庫的場景

Axios 是一個基于 Promise 的 HTTP 請求庫，其特點如下：

支持在 Node 環境中使用；
支持請求取消、請求攔截、響應攔截等高階操作；
鏈式調用使得代碼更加簡潔明了；
自動轉換 JSON 格式數據。

根據上面的特點，我們可以在以下場景使用 Axios：

在需要支持 Node.js 框架的項目中使用；
對于需要高階操作（比如請求取消、請求攔截等），以及需要在多個組件中使用相同的請求實例時使用；
對于需要處理 JSON 格式數據的應用。

因為 Axios 是第三方庫，它的體積比起 Fetch 來會比較大些，如果只是一個小型的項目，可能沒有必要使用它，不過對于一個大型的項目而言，使用 Axios 會更加方便和靈活。

綜上所述，我們可以根據項目的實際需求選擇使用 Fetch 或者 Axios，以達到最優的網絡請求效果。

如何使用Fetch庫？

Fetch 是一個新的JavaScript庫，用于發起網絡請求以獲取資源。它提供了一個更簡單和更靈活的方式發送HTTP請求，比傳統的 Ajax 更為先進和功能豐富。Fetch 它通過 Promise 來處理異步請求和響應，讓代碼更加簡潔和易于維護。

Fetch 語法如下：

fetch(url, options)
  .then(response => {
    // 處理響應
  })
  .catch(error => {
    // 處理錯誤
  });

url: 請求的地址。
options: 包含請求的參數，如請求方法、請求頭、請求體等。它是一個可選的參數對象，可設置以下屬性：method: 請求方法，如 GET、POST、PUT、DELETE 等，默認是 GET。headers: 請求頭信息，它是一個對象，表示請求頭字段和其值的集合。body: 請求體，通常用于指定提交的數據格式，如 JSON、文本、formData 等。mode: 請求模式，例如 CORS、no-cors、same-origin 等，它是一個字符串類型。credentials: 是否允許發送包含憑據（如 cookie、認證頭等）的請求。cache: 控制瀏覽器是否緩存請求。

當 fetch 函數被調用后，它會返回一個 Promise 對象。這個 Promise 對象會在請求成功后傳遞一個響應對象（ response）并調用對應的 then() 方法。在響應對象中可以取得請求返回的數據，以及請求的狀態碼等信息。

以下是一個發送 GET 請求的示例：

fetch('https://jsonplaceholder.typicode.com/todos/1')
  .then(response => response.json()) // 解析響應的JSON數據
  .then(data => console.log(data)) // 處理數據
  .catch(error => console.error(error)) // 處理錯誤

以下是一個發送 POST 請求的示例：

fetch('https://jsonplaceholder.typicode.com/posts', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json'
   },
  body: JSON.stringify({
    title: 'foo',
    body: 'bar',
    userId: 1
  })
})
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error(error))

在以上示例中，fetch 函數接受兩個參數。第一個參數是請求的URL，第二個參數包含請求的參數，如 POST 請求的 body、headers 等。在 then() 方法中，我們可以使用 response.json() 解析響應的 JSON 數據，然后處理返回的數據。在 catch() 方法中，可以處理請求過程中可能出現的錯誤。

如何在vue中引入Fetch庫？

在 Vue 項目中使用 Fetch 庫，需要先在項目中安裝 Fetch 庫：

復制npm install whatwg-fetch --save

安裝完成后，在 main.js 文件中添加以下代碼：

復制import 'whatwg-fetch'

這樣，Fetch 庫就可以在整個項目中使用了。在需要發送網絡請求的組件中，可以使用以下示例代碼：

fetch(url, options)
  .then(response => {
    // 處理響應
  })
  .catch(error => {
    // 處理錯誤
  });

其中，url 和 options 的使用方式與上文中介紹的一致。在 then() 方法中，可以通過 response 對象獲取響應數據。由于 fetch 返回的是一個 Promise，因此我們也可以使用 async/await 來進行異步代碼處理：

async function fetchData() {
  try {
    const response = await fetch(url, options)
    const data = await response.json()

    // 處理數據
  } catch (error) {
    // 處理錯誤
  }
}

如果你想在 Vue 中全局使用 Fetch 庫，你可以通過在 Vue.prototype 上添加一個方法實現全局調用：

import 'whatwg-fetch'
import Vue from 'vue'

Vue.prototype.$fetch = fetch

這樣，在任何 Vue 組件中都可以通過 this.$fetch 方法來發送網絡請求了：

// 使用 this.$fetch 方法發送網絡請求
this.$fetch(url, options)
  .then(response => {
    // 處理響應
  })
  .catch(error => {
    // 處理錯誤
  });

如果你習慣使用 Axios 等其它的網絡請求工具，也可以在 Vue 項目中使用它們來發送網絡請求。只需要在項目中安裝和引入對應的庫即可。

責任編輯：華軒來源：今日頭條

前端后端

前端的請求如何到后端的 ？