引言

這是一段我看從別人的Axios代碼里看到的代碼片段

const msg = error.response?.data?.msg ?? error.response?.data?.message ?? error.message

起初這個?的用法，我只在定義接口的時候用過

export interface UserInfo {
  id: string 
  pwd: string  // 密碼
  nickname: string // 用戶名稱
  wechatCode?: string  // 微信號
}

表示：wechatCode是可選的，有也行沒有也行。其他的都是一定要有的。

error.response?.data 我還能理解，表示error中是否有response，如果有就再.data如果沒有就返回空嘛。但是??我就不能理解啦。懷揣著好奇心學習了一下，分享給同樣不知道的同學們。

一、關鍵語法講解

1.可選鏈操作符 ?.

• 作用：安全地訪問嵌套對象的屬性，如果訪問路徑上的某個屬性是 null 或 undefined，不會報錯，而是直接返回 undefined。
• 傳統(tǒng)寫法：如果直接寫 error.response.data.msg，如果 error.response 是 undefined，會拋出 Cannot read properties of undefined (reading 'data') 錯誤。
• 可選鏈寫法：error.response?.data?.msg 會先檢查 error.response 是否存在（非 null/undefined），存在才繼續(xù)訪問 data，再檢查 data 存在才訪問 msg，任何一步不存在就返回 undefined。

2.空值合并操作符 ??

作用：只在左邊的值是 null 或 undefined 時，才返回右邊的值（區(qū)別于 ||，|| 會把 ''、0、false 等 “假值” 也判定為無效）。

• 例子：
  • undefined ?? '默認值' → 返回 '默認值'；
  • '' ?? '默認值' → 返回 ''（因為 '' 不是 null/undefined）。
• 對比 ||：'' || '默認值' → 返回 '默認值'，這是兩者的核心區(qū)別。

二、整行代碼分析

const msg = error.response?.data?.msg ?? error.response?.data?.message ?? error.message

這行代碼的核心目的是：按優(yōu)先級從 error 對象中提取錯誤提示信息，確保最終拿到一個有效的、非空的錯誤文本，查找優(yōu)先級如下：

1、第一優(yōu)先級：error.response?.data?.msg 先嘗試從 error 的 response.data 里找 msg 屬性（很多后端接口返回的錯誤信息字段是 msg）。

2、第二優(yōu)先級：error.response?.data?.message 如果第一步的結果是 null/undefined（比如接口返回的錯誤字段是 message 而不是 msg），就嘗試找 response.data 里的 message 屬性。

3、最后兜底：error.message 如果前兩步都沒找到（比如沒有 response 層級，比如前端自身拋出的錯誤），就取 error 本身的 message 屬性（JS 原生 Error 對象默認有 message 字段）。

三、舉例子講解加深印象

const msg = error.response?.data?.msg ?? error.response?.data?.message ?? error.message

還是這個代碼，用三種不同的接口情況返回讓你更好的理解。下面的三個例子要和這條代碼對照起來看。

假設有三種不同的 error 結構，看 msg 的取值結果：

例子 1：接口返回 msg 字段

const error = {
  response: {
    data: { msg: '用戶名已存在' }
  }
};
// 執(zhí)行代碼后，msg = '用戶名已存在'（取第一優(yōu)先級）

例子 2：接口返回 message 字段

const error = {
  response: {
    data: { message: '密碼錯誤' }
  }
};
// 第一步 msg 是 undefined → 第二步取 message → msg = '密碼錯誤'

例子 3：前端原生錯誤（無 response 層級）

const error = new Error('網(wǎng)絡請求超時');
// 前兩步都是 undefined → 取 error.message → msg = '網(wǎng)絡請求超時'

四、總結

• ?. 是為了安全訪問嵌套屬性，避免因某個屬性不存在導致代碼報錯；
• ?? 是為了精準判斷 “無值”（僅 null/undefined），優(yōu)先使用接口返回的錯誤信息，兜底用原生錯誤信息；
• 整行代碼的核心邏輯是：按 msg → message（接口層級）→ message（錯誤對象層級）的優(yōu)先級，提取有效的錯誤提示文本。

const msg = error.response?.data?.msg ?? error.response?.data?.message ?? error.message

通過本次學習，再結合案例分析一下。這個寫法似乎是前端處理異步請求（如 Axios）錯誤信息的常用最佳實踐，能兼容不同格式的錯誤返回，保證代碼的健壯性。

到此這篇關于一文詳解JavaScript中?.(可選鏈操作符)和??(空值合并操作符)的用法的文章就介紹到這了,更多相關JavaScript ?.和??用法內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

最新評論