殿上欢,有声小说在线收听网

新聞中心

這里有您想知道的互聯(lián)網(wǎng)營銷解決方案

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

前端的請求到達(dá)后端的步驟通常如下：

成都創(chuàng)新互聯(lián)堅持“要么做到，要么別承諾”的工作理念，服務(wù)領(lǐng)域包括：成都網(wǎng)站建設(shè)、成都網(wǎng)站制作、企業(yè)官網(wǎng)、英文網(wǎng)站、手機(jī)端網(wǎng)站、網(wǎng)站推廣等服務(wù)，滿足客戶于互聯(lián)網(wǎng)時代的玉山網(wǎng)站設(shè)計、移動媒體設(shè)計的需求，幫助企業(yè)找到有效的互聯(lián)網(wǎng)解決方案。努力成為您成熟可靠的網(wǎng)絡(luò)建設(shè)合作伙伴！

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

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

HTTP請求解析

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

請求方法：

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

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

請求頭：

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

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

請求正文：

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

以下是一個示例的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，請求頭包含瀏覽器信息、接受的數(shù)據(jù)類型、支持的壓縮算法等信息。請求正文是一個URL編碼的數(shù)據(jù)字符串，包含了用戶名和密碼字段。

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

Fetch 和 Axios 都是前端常用的網(wǎng)絡(luò)請求庫。它們都可以用來發(fā)送網(wǎng)絡(luò)請求并處理相應(yīng)數(shù)據(jù)，但是它們又有各自的優(yōu)缺點。下面是它們的特點以及使用場景的建議：

使用 Fetch 庫的場景

Fetch 是 Window 的一個新的 API，它是一個原生的JavaScript庫，內(nèi)置于現(xiàn)代瀏覽器中。優(yōu)點如下：

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

根據(jù)上面的優(yōu)點，我們可以在以下場景使用 Fetch：

適用于現(xiàn)代瀏覽器，并且項目不需要考慮老版本瀏覽器的兼容性；
對于處理大響應(yīng)數(shù)據(jù)，或者需要實現(xiàn)離線支持的項目。

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

使用 Axios 庫的場景

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

支持在 Node 環(huán)境中使用；
支持請求取消、請求攔截、響應(yīng)攔截等高階操作；
鏈?zhǔn)秸{(diào)用使得代碼更加簡潔明了；
自動轉(zhuǎn)換 JSON 格式數(shù)據(jù)。

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

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

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

綜上所述，我們可以根據(jù)項目的實際需求選擇使用 Fetch 或者 Axios，以達(dá)到最優(yōu)的網(wǎng)絡(luò)請求效果。

如何使用Fetch庫？

Fetch 是一個新的JavaScript庫，用于發(fā)起網(wǎng)絡(luò)請求以獲取資源。它提供了一個更簡單和更靈活的方式發(fā)送HTTP請求，比傳統(tǒng)的 Ajax 更為先進(jìn)和功能豐富。Fetch 它通過 Promise 來處理異步請求和響應(yīng)，讓代碼更加簡潔和易于維護(hù)。

Fetch 語法如下：

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

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

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

以下是一個發(fā)送 GET 請求的示例：

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

以下是一個發(fā)送 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 函數(shù)接受兩個參數(shù)。第一個參數(shù)是請求的URL，第二個參數(shù)包含請求的參數(shù)，如 POST 請求的 body、headers 等。在 then() 方法中，我們可以使用 response.json() 解析響應(yīng)的 JSON 數(shù)據(jù)，然后處理返回的數(shù)據(jù)。在 catch() 方法中，可以處理請求過程中可能出現(xiàn)的錯誤。

如何在vue中引入Fetch庫？

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

復(fù)制npm install whatwg-fetch --save

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

復(fù)制import 'whatwg-fetch'

這樣，F(xiàn)etch 庫就可以在整個項目中使用了。在需要發(fā)送網(wǎng)絡(luò)請求的組件中，可以使用以下示例代碼：

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

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

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

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

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

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

Vue.prototype.$fetch = fetch

這樣，在任何 Vue 組件中都可以通過 this.$fetch 方法來發(fā)送網(wǎng)絡(luò)請求了：

// 使用 this.$fetch 方法發(fā)送網(wǎng)絡(luò)請求
this.$fetch(url, options)
  .then(response => {
    // 處理響應(yīng)
  })
  .catch(error => {
    // 處理錯誤
  });

如果你習(xí)慣使用 Axios 等其它的網(wǎng)絡(luò)請求工具，也可以在 Vue 項目中使用它們來發(fā)送網(wǎng)絡(luò)請求。只需要在項目中安裝和引入對應(yīng)的庫即可。

本文標(biāo)題：前端的請求如何到后端的？
文章來源：http://fisionsoft.com.cn/article/coopdos.html