try catch 在實際開發場景中的五大用處，用起來！！！
作者：林三心不學挖掘機
昨天一位群友在面試的時候被問到了這么一個問題：多個請求同時發起時，如何保證失敗或者成功都返回，我第一啥時間就想到了?Promise.allSettled?來實現。
前言
大家好，我是林三心，用最通俗易懂的話講最難的知識點是我的座右銘，基礎是進階的前提是我的初心~
昨天一位群友在面試的時候被問到了這么一個問題：多個請求同時發起時，如何保證失敗或者成功都返回，我第一啥時間就想到了 Promise.allSettled 來實現
// 模擬多個異步操作：獲取用戶基本信息、訂單記錄、消息通知
const fetchUserInfo = () =>
fetch('/api/user').then(res => res.json());
const fetchOrders = () =>
fetch('/api/orders').then(res => {
if (!res.ok) thrownewError('訂單獲取失敗')
return res.json()
});
const fetchNotifications = () =>
newPromise((_, reject) =>
setTimeout(() => reject(newError('請求超時')), 3000)
);
// 使用 Promise.allSettled 并行執行
Promise.allSettled([
fetchUserInfo(),
fetchOrders(),
fetchNotifications()
])
.then(results => {
const [userResult, ordersResult, notifyResult] = results;
// 處理用戶信息
if (userResult.status === 'fulfilled') {
console.log('用戶數據:', userResult.value);
renderUserProfile(userResult.value);
} else {
console.error('用戶信息失敗:', userResult.reason);
showPlaceholder('#user-section');
}
// 處理訂單數據
if (ordersResult.status === 'fulfilled') {
console.log('訂單數據:', ordersResult.value);
renderOrderList(ordersResult.value);
} else {
console.error('訂單獲取失敗:', ordersResult.reason);
showErrorToast('訂單加載異常');
}
// 處理通知數據
if (notifyResult.status === 'fulfilled') {
console.log('通知數據:', notifyResult.value);
updateNotificationBadge(notifyResult.value);
} else {
console.warn('通知獲取失敗:', notifyResult.reason);
disableNotificationBell();
}
});
/* 輸出示例：
用戶數據: {id: 1, name: "張三"}
訂單數據: [ {...}, {...} ]
通知獲取失敗: Error: 請求超時
*/但是他說了：面試官說除了 Promise.allSettled 實現，還有什么其他辦法嗎？ 于是我又想到了使用 try catch + Promise.all:
// 模擬多個異步操作：獲取用戶基本信息、訂單記錄、消息通知
const fetchUserInfo = async () => {
try {
const res = await fetch('/api/user')
return res.json()
} catch {
returnnull
}
}
const fetchOrders = async () => {
try {
const res = await fetch('/api/orders')
if (!res.ok) thrownewError('訂單獲取失敗')
return res.json()
} catch {
returnnull
}
}
const fetchNotifications = async () => {
try {
awaitnewPromise((_, reject) =>
setTimeout(() => reject(newError('請求超時')), 3000)
)
} catch {
returnnull
}
}
// 使用 Promise.all
Promise.all([
fetchUserInfo(),
fetchOrders(),
fetchNotifications()
]).then(res => {
console.log(res)
// [
// {id: 1, name: "張三"},
// [ {...}, {...} ],
// null
// ]
})接著這位群友問我能不能出一篇 try catch 在實際開發中的使用場景，我想想其實可以講講
try catch 場景
1、異步請求的優雅處理
典型場景： 處理 AJAX/Fetch 請求時網絡錯誤、接口異常
async function fetchUserData() {
try {
const response = await fetch('/api/user');
if (!response.ok) thrownewError('HTTP Error');
const data = await response.json();
// 正常處理邏輯
} catch (error) {
console.error('請求失敗:', error);
showToast('數據加載失敗，請檢查網絡');
// 降級處理：顯示緩存數據/缺省頁面
}
}2、JSON 解析的安全防護
常見問題： JSON.parse() 遇到非法格式時導致整個應用崩潰
function safeParse(jsonString) {
try {
return JSON.parse(jsonString);
} catch (e) {
console.warn('JSON 解析失敗，返回默認值');
return {}; // 或執行其他恢復邏輯
}
}
// 使用案例
const userPrefs = safeParse(localStorage.getItem('preferences'));3、第三方庫的錯誤隔離
痛點場景： 不確定穩定性的插件/工具庫可能拋出意外錯誤
function safePluginInit() {
try {
ThirdPartyPlugin.init({
// 復雜配置項
});
} catch (e) {
captureErrorToSentry(e); // 上報錯誤
loadFallbackPlugin(); // 降級方案
}
}4、表單驗證的靈活應用
function validateForm(formData) {
try {
if (!formData.email.includes('@')) {
thrownew ValidationError('郵箱格式錯誤');
}
if (formData.password.length < 8) {
thrownew ValidationError('密碼至少8位');
}
} catch (e) {
if (e instanceof ValidationError) {
highlightErrorField(e.message);
returnfalse;
}
// 其他未知錯誤繼續拋出
throw e;
}
}5、瀏覽器特性檢測的優雅降級
兼容性處理： 替代傳統的特性檢測寫法
function checkWebGLSupport() {
try {
const canvas = document.createElement('canvas');
return !!window.WebGLRenderingContext &&
(canvas.getContext('webgl') || canvas.getContext('experimental-webgl'));
} catch (e) {
returnfalse;
}
}
if (!checkWebGLSupport()) {
showCompatibilityWarning();
load2DFallback();
}責任編輯：武曉燕
來源：
前端之神
