JavaScript前端常見異常及如何捕獲詳解

更新時間：2024年03月06日 16:22:11 作者：Aggie1468991348000

這篇文章主要為大家詳細介紹了JavaScript前端中的常見異常以及如何捕獲這些異常,文中的示例代碼講解詳細,需要的小伙伴可以參考一下

全局捕獲-架構側

js全局異常捕獲：window.onEerror 和 window.addEventLisenter（'error'）

Promise全局異常捕獲：unhandledrejection

框架級的全局異常捕獲

React：React的ErrorBoundary

// ErrorBoundary的示例
class ErrorBoundary extends React.Component {
    constructor(props) {
      super(props);
      this.state = { hasError: false };
    }
  
    componentDidCatch(error, info) {
      this.setState({ hasError: true });
      // 在這里可以做異常的上報
      logErrorToMyService(error, info);
    }
  
    render() {
      if (this.state.hasError) {
        return <h1>Something went wrong.</h1>;
      }
      return this.props.children;
  }
  
  <ErrorBoundary>
    <MyWidget />
  </ErrorBoundary>

Vue：Vue的Vue.config.errorHandler

axios：請求統(tǒng)一底層封裝異常處理攔截器 interceptors

全局捕獲-框架層

Vue 用 errorHandler 和 React 用 componentDidCatch

局部捕獲-業(yè)務側

可疑代碼塊try-catch

try catch能捕獲捉到運行時非異步錯誤，無法捕獲語法錯誤和異步錯誤。這個需要注意。

合理使用，不要過度使用。有得異常需要拋出去給外部處理。

常見的需要注意用try-catch包裹，捕獲異常的情況

JSON處理必須使用try catch捕獲異常

try {
  const res=fetch(*)
  JSON.parse(res); // res 為服務端返回的數(shù)據(jù)
} catch(e) {
   // 捕獲到詳細的錯誤，在這里處理日志上報或其他異常處理等邏輯，如是否提示用戶，是否有異常下的兜底數(shù)據(jù)，比如使用緩存數(shù)據(jù)等
  console.error("服務端數(shù)據(jù)格式返回異常，無法解析", res);
  
}

// 注意：下面的異常try catch無法捕獲

try {
  setTimeout(() => {
    undefined.map(v => v);
  }, 1000)
} catch(e) {
  console.log("捕獲到異常：", e);
}

async await異步請求

正則表達式處理

buffer處理

Promise異常

注意未被捕獲的promise異常會作為全局異常拋出。

局部Promise捕獲兩種方式：

// 1. Promise().catch()
let promise = new Promise((resolve,reject)=>{}).catch(e=>{
   // handle error
})

// 2. async/await + try/catch
let promise = new Promise();
async function test() {
  try {
    await promise;
  } catch (e) {
    // handle error
  }
}

用Promise().catch(),

全局Promise異常用window.addEventListener("unhandledrejection"）

注意：

Promise自己的異常只能被自己catch, 或在try/catch里以await的方式調用來捕獲。否則就會作為ERR_UNHANDLED_REJECTION異常拋出到全局。

外層Promise不能不能捕獲內層Promise的異常。

let p1 = new Promise(async (resolve, reject) => {
  return reject(100); // 被捕獲
});
async function fn() {
  try {
    let result = await p1;
    console.log(2, result); //這里不會執(zhí)行
  } catch (e) {
    console.log("e:", e); //這里不會執(zhí)行
  }
}
fn();

let p1 = new Promise(async (resolve, reject) => {
  return reject(100); // 未被捕獲，會拋出全局異常：ERR_UNHANDLED_REJECTION
});
function fn() {
  try {
    let result = p1;
    console.log(2, result); //這里不會執(zhí)行
  } catch (e) {
    console.log("e:", e); //這里不會執(zhí)行
  }
}
fn();

let p1 = new Promise(async (resolve, reject) => {
  console.log("after reject");
  return Promise.reject(100); // 未被捕獲，會拋出全局異常：ERR_UNHANDLED_REJECTION
});
async function fn() {
  try {
    let result = await p1;
    console.log(2, result); //這里不會執(zhí)行
  } catch (e) {
    console.log("e:", e); //這里不會執(zhí)行
  }
}
fn();

let p1 = new Promise(async (resolve, reject) => {
  return Promise.reject(100); // 未被捕獲，會拋出全局異常：ERR_UNHANDLED_REJECTION
}).catch((e) => {
  console.log("promise out e", e); // 這里不會執(zhí)行
});
async function fn() {
  try {
    let result = await p1;
    console.log(2, result); //這里不會執(zhí)行
  } catch (e) {
    console.log("e:", e); //這里不會執(zhí)行
  }
}
fn();

Promise里同步拋出的異常，會觸發(fā)Promise.reject而被捕獲。但異步拋出的異常，不會觸發(fā)Promise.reject，因此不會被捕獲。

new Promise((resolve, reject) => {
  throw new Error("Error1"); // 等效于reject
}).catch((e) => {
  console.log("異常被捕獲到了1");
});

new Promise(async (resolve, reject) => {
  reject(new Error("Error2"));
}).catch((e) => {
  console.log("異常被捕獲到了2");
});

new Promise(async () => {
  throw new Error("Error3");
}).catch((e) => {
  console.log("異常被捕獲到了3");
});