使用 setResponseStatus 函式設定響應狀態碼

Amd794發表於2024-08-25
函式

title: 使用 setResponseStatus 函式設定響應狀態碼
date: 2024/8/25
updated: 2024/8/25
author: cmdragon

excerpt:
透過 setResponseStatus 函式，你可以輕鬆地在 Nuxt.js 中設定響應的狀態碼。這不僅能幫助使用者更好地理解發生了什麼，還能在需要時顯示自定義的錯誤頁面。在實際應用中，合理使用狀態碼對於提升使用者體驗至關重要。

categories:

  • 前端開發

tags:

  • Nuxt.js
  • 響應碼
  • SSR
  • 404頁面
  • Vue.js
  • 狀態碼
  • Web開發

image
image

掃描二維碼關注或者微信搜一搜：程式設計智域 前端至全棧交流與成長

在開發應用時，我們常常需要根據不同的情況返回不同的響應狀態碼。在 Nuxt.js 中，setResponseStatus 函式讓你能夠方便地設定伺服器端的響應狀態碼，特別是在進行伺服器端渲染（SSR）時。

什麼是響應狀態碼？

HTTP 響應狀態碼是伺服器向客戶端返回的數字程式碼，表明請求的處理結果。常見的狀態碼包括：

  1. 1xx（資訊性狀態碼） ：

    • 這類狀態碼主要用於表示請求已被接收，伺服器正在處理。其內容通常不會影響客戶端的行為。

    • 例如：

      • 100 Continue：客戶端應繼續請求。
      • 101 Switching Protocols：伺服器正在切換協議。

  2. 2xx（成功狀態碼） ：

    • 表示請求已成功被伺服器接收、理解並處理。

    • 例如：

      • 200 OK：請求成功，通常返回所請求的資源。
      • 201 Created：請求成功並建立了新的資源。
      • 204 No Content：請求成功，但沒有返回內容。

  3. 3xx（重定向狀態碼） ：

    • 表示請求的資源已被移動到其他位置，客戶端需要進一步操作以完成請求。

    • 例如：

      • 301 Moved Permanently：請求的資源已被永久移動到新位置，返回的響應中會包含新位置的 URL。
      • 302 Found：請求的資源臨時被移動。

  4. 4xx（客戶端錯誤狀態碼） ：

    • 表示請求存在問題，導致伺服器無法處理。大多數情況下是由於客戶端的錯誤引起的。

    • 例如：

      • 400 Bad Request：請求格式不正確。
      • 401 Unauthorized：需要身份驗證，使用者未提供有效憑據。
      • 403 Forbidden：伺服器拒絕請求，客戶端沒有許可權訪問此資源。
      • 404 Not Found：請求的資源未找到，通常是頁面不存在。

  5. 5xx（伺服器錯誤狀態碼） ：

    • 表示伺服器在處理請求時發生了錯誤。通常是由於伺服器內部的問題。

    • 例如：

      • 500 Internal Server Error：伺服器發生了未知錯誤，無法完成請求。
      • 502 Bad Gateway：伺服器作為閘道器或代理時，接收到無效響應。
      • 503 Service Unavailable：伺服器當前無法處理請求，通常是因為過載或正在維護。

Nuxt.js 中的 setResponseStatus

Nuxt.js 提供了 setResponseStatus 函式，你可以在伺服器端使用它來設定響應的狀態碼。有時，我們不僅希望設定狀態碼，還希望傳遞一條訊息，以便給使用者更好的反饋。

基本用法

以下是 setResponseStatus 函式的基本使用示例：

// 匯入 Nuxt 中的組合式函式
const event = useRequestEvent()

// 設定狀態碼為 404
setResponseStatus(event, 404)

// 如果需要，也可以傳遞狀態訊息
setResponseStatus(event, 404, '頁面未找到')

在這裡，我們首先透過 useRequestEvent() 獲取當前請求的事件物件，然後使用 setResponseStatus 來設定響應狀態碼。

建立自定義404頁面的示例

下面我們將建立一個自定義 404 頁面，當使用者訪問不存在的頁面時，顯示該頁面及其狀態資訊。

步驟 1: 建立404頁面

在 pages 目錄下建立一個 404.vue 檔案，內容如下：

<template>
  <div>
    <h1>404 - 頁面未找到</h1>
    <p>抱歉，您訪問的頁面不存在。</p>
  </div>
</template>

<script setup>

const event = useRequestEvent()
setResponseStatus(event, 404, '頁面未找到')
</script>

<style scoped>
h1 {
  color: red;
}
</style>

在這個 404.vue 頁面中，我們使用 useRequestEvent() 獲取請求事件，並呼叫 setResponseStatus 函式將狀態碼設定為 404 並附帶狀態訊息。

步驟 2: 測試404頁面

啟動 Nuxt 應用：

npm run dev

然後嘗試訪問一個不存在的頁面，例如 http://localhost:3000/不存在的頁面。你應該能夠看到自定義的 404 頁面以及相應的狀態碼。

總結

透過 setResponseStatus 函式，你可以輕鬆地在 Nuxt.js 中設定響應的狀態碼。這不僅能幫助使用者更好地理解發生了什麼，還能在需要時顯示自定義的錯誤頁面。在實際應用中，合理使用狀態碼對於提升使用者體驗至關重要。

餘下文章內容請點選跳轉至 個人部落格頁面 或者 掃碼關注或者微信搜一搜：程式設計智域 前端至全棧交流與成長，閱讀完整的文章：使用 setResponseStatus 函式設定響應狀態碼 | cmdragon's Blog

往期文章歸檔：

  • 如何在 Nuxt 中動態設定頁面佈局 | cmdragon's Blog
  • 使用 reloadNuxtApp 強制重新整理 Nuxt 應用 | cmdragon's Blog
  • 使用 refreshNuxtData 重新整理 Nuxt應用 中的資料 | cmdragon's Blog
  • 使用 prerenderRoutes 進行預渲染路由 | cmdragon's Blog
  • 使用 preloadRouteComponents 提升 Nuxt 應用的效能 | cmdragon's Blog
  • 使用 preloadComponents 進行元件預載入 | cmdragon's Blog
  • 使用 prefetchComponents 進行元件預取 | cmdragon's Blog
  • 使用 onNuxtReady 進行非同步初始化 | cmdragon's Blog
  • 使用 onBeforeRouteUpdate 組合式函式提升應用的使用者體驗 | cmdragon's Blog
  • 使用 onBeforeRouteLeave 組合式函式提升應用的使用者體驗 | cmdragon's Blog
  • 使用 navigateTo 實現靈活的路由導航 | cmdragon's Blog
  • 使用 Nuxt 3 的 defineRouteRules 進行頁面級別的混合渲染 | cmdragon's Blog
  • 掌握 Nuxt 3 的頁面後設資料：使用 definePageMeta 進行自定義配置 | cmdragon's Blog
  • 使用 defineNuxtRouteMiddleware 建立路由中介軟體 | cmdragon's Blog
  • 使用 defineNuxtComponent`定義 Vue 元件 | cmdragon's Blog
  • 使用 createError 建立錯誤物件的詳細指南 | cmdragon's Blog
  • 清除 Nuxt 狀態快取：clearNuxtState | cmdragon's Blog
  • 清除 Nuxt 資料快取：clearNuxtData | cmdragon's Blog
  • 使用 clearError 清除已處理的錯誤 | cmdragon's Blog
  • 使用 addRouteMiddleware 動態新增中間 | cmdragon's Blog

相關文章