大家好，我是若川。歡迎加我微信?ruochuan12，長期交流學習。今天分享幾個常見的前端防御性編程方案。點擊下方卡片關注我，或者查看源碼等系列文章。學習源碼整體架構系列、年度總結、JS基礎系列

關于前端防御性編程

• 我們大多數情況可能遇到過，后端的由于同時請求人數過多，或者數據量過大，又或者是因為異常導致服務異常，接口請求失敗，然后前端出現白屏或者報錯

• 還有一種情況，是前端自身寫的代碼存在一些缺陷，整個系統不夠健壯，從而會出現白屏，或者業務系統異常，用戶誤操作等

• 那么，就出現了前端防御性編程

常見的問題和防范

1.最常見的問題:

uncaught?TypeError:?Cannot?read?property?'c'?of?undefined

出現這個問題最根本原因是：

當我們初始化一個對象obj為{}時候,obj.a這個時候是undefined.我們打印obj.a可以得到undefined,但是我們打印obj.a.c的時候，就會出現上面的錯誤。js對象中的未初始化屬性值是undefined,從undefined讀取屬性就會導致這個錯誤(同理，null也一樣)

如何避免?

js和ts目前都出現了一個可選鏈概念,例如：

const?obj?=?{}; console.log(obj?.b?.c?.d)

上面的代碼并不會報錯，原因是?.遇到是空值的時候便會返回undefined.

2.前端接口層面的錯誤機制捕獲

前端的接口調用，一般都比較頻繁，我們這時候可以考慮使用單例模式,將所有的axios請求都用一個函數封裝一層。統一可以在這個函數中catch捕獲接口調用時候的未知錯誤，偽代碼如下：

function?ajax(url,data,method='get'){const?promise?=?axios[method](url,data)return??promise.then(res=>{}).catch(error){//統一處理錯誤 } }

那么只要發生接口調用的未知錯誤都會在這里被處理了

3.錯誤邊界（Error Boundaries,前端出現未知錯誤時，展示預先設定的UI界面）

以React為例

部分 UI 的 JavaScript 錯誤不應該導致整個應用崩潰，為了解決這個問題，React 16 引入了一個新的概念 —— 錯誤邊界。

錯誤邊界是一種 React 組件，這種組件可以捕獲并打印發生在其子組件樹任何位置的 JavaScript 錯誤，并且，它會渲染出備用 UI，而不是渲染那些崩潰了的子組件樹。錯誤邊界在渲染期間、生命周期方法和整個組件樹的構造函數中捕獲錯誤。

使用示例：

class?ErrorBoundary?extends?React.Component?{constructor(props)?{super(props);this.state?=?{?hasError:?false?};}static?getDerivedStateFromError(error)?{//?更新?state?使下一次渲染能夠顯示降級后的?UIreturn?{?hasError:?true?};}componentDidCatch(error,?errorInfo)?{//?你同樣可以將錯誤日志上報給服務器logErrorToMyService(error,?errorInfo);}render()?{if?(this.state.hasError)?{//?你可以自定義降級后的?UI?并渲染return?<h1>Something?went?wrong.</h1>;}return?this.props.children;?} }

注意

• 錯誤邊界無法捕獲以下場景中產生的錯誤：

• • 事件處理（了解更多）

  • 異步代碼（例如 setTimeout 或 requestAnimationFrame 回調函數）

  • 服務端渲染

  • 它自身拋出來的錯誤（并非它的子組件）

4.前端復雜異步場景導致的錯誤

• 這個問題可能遠不止這么簡單，但是大道至簡，遵循單向數據流的方式去改變數據，例如：

//test.js export?const?obj?=?{a:1,b:2 }//使用obj import?{obj}?from?'./test.js'; obj.a=3;

當你頻繁使用這個obj對象時，你無法根據代碼去知道它的改變順序（即在某個時刻它的值是什么）,而且這里面可能存在不少異步的代碼，當我們換一種方式，就能知道它的改變順序了,也更方便我們debug

例如：

//test.js export?const?obj?=?{a:1,b:2 } export?function?setObj?(key,value)??{console.log(key,value)obj[key]?=?value }

這樣，我們就做到了

5.前端專注“前端”

• 對于一些敏感數據，例如登錄態，鑒權相關的。前端應該是盡量做無感知的轉發、攜帶（這樣也不會出現安全問題）

6.頁面做到可降級

• 對于一些剛上新的業務，或者有存在風險的業務模塊，或者會調取不受信任的接口，例如第三方的接口，這個時候就要做一層降級處理，例如接口調用失敗后，剔除對應模塊的展示，讓用戶無感知的使用

7.巧用loading和disabled

• 用戶操作后，要及時loading和disabled確保不讓用戶進行重復，防止業務側出現bug

8.慎用innerHTML

• 容易出現安全漏洞，例如接口返回了一段JavaScript腳本，那么就會立即執行。此時腳本如果是惡意的，那么就會出現不可預知的后果，特別是電商行業，尤其要注意。

---

最近組建了一個江西人的前端交流群，如果你也是江西人可以加我微信 ruochuan12 拉你進群。

---

·················?若川出品?·················

今日話題

運營公眾號以來，常有人識別二維碼加群打廣告或者搶紅包，比如發支付寶口令紅包會被分享給別人搶，關鍵就一塊錢，另外還有搞抽獎活動也有非前端的人參與抽獎，有時候懷疑他們有團隊，專門擼羊毛。歡迎分享、收藏、點贊、在看我的公眾號文章~

一個愿景是幫助5年內前端人走向前列的公眾號

可加我個人微信 ruochuan12，長期交流學習

推薦閱讀

我在阿里招前端，我該怎么幫你？（現在還能加我進模擬面試群）

如何拿下阿里巴巴 P6 的前端 Offer

點擊上方卡片關注我，或者查看源碼等系列文章。
學習源碼整體架構系列、年度總結、JS基礎系列

總結

以上是生活随笔為你收集整理的常见的8个前端防御性编程方案的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。