前言

退出函數(shù)怎么寫？有人會(huì)說一個(gè) return 就退出函數(shù)了，有這么簡單嗎？來看一個(gè)表單校驗(yàn)和提交結(jié)果的函數(shù)：

// 表單校驗(yàn)
function validate() {}
// 提交表單
function submit() {
  validate();// ？如果表單校驗(yàn)失敗怎么退出函數(shù)呢？
  fetch("/api/submit", {
    // ...
  });
}

如果表單校驗(yàn)失敗怎么退出函數(shù)呢？傳統(tǒng)的思維方式必然是使用return解決，讓 validate 函數(shù)返回一個(gè)值來判斷是退出函數(shù)還是繼續(xù)執(zhí)行：

function validate() {}
function submit() {
+  if (!validate()) {
+    return;
+  }
  fetch("/api/submit", {
    // ...
  });
}

這樣解決是可以的，但是不夠優(yōu)雅，為什么呢？因?yàn)?validate 函數(shù)本身是不需要返回值的，現(xiàn)在卻為了功能必須添加一個(gè)返回值，并且 submit 函數(shù)還依賴于 validate 的返回值，增加了函數(shù)之間的耦合度。如何優(yōu)雅地退出函數(shù)，這就是今天的主題。

拋出異常

第一個(gè)方法當(dāng)然是拋出異常，這一招我屢試不爽，還是上面那個(gè)案例，先看看如何通過拋出異常退出函數(shù)：

// 表單校驗(yàn)
function validate() {
+    throw new Error("驗(yàn)證失敗");
}
// 提交表單
function submit() {
  validate();// ？如果表單校驗(yàn)失敗怎么退出函數(shù)呢？
  fetch("/api/submit", {
    // ...
  });
}

如果 submit 還有其他很多流程并且這些流程中的某個(gè)分支也需要退出整個(gè) submit 函數(shù)，使用拋出異常退出函數(shù)的話就不需要寫那么多的 if else 了，例如：

// 提交表單
function submit() {
  validate();// ？如果表單校驗(yàn)失敗怎么退出函數(shù)呢？
  doSomething1(); 
  doSomething2();
  fetch("/api/submit", {
    // ...
  });
}

但是這種方式也有一個(gè)弊端，那就是帶來了控制臺(tái)的爆紅，不過一看就看得出來這不是程序報(bào)錯(cuò)導(dǎo)致的，是我們手動(dòng)拋出的：

拋出異常這種方式在異步函數(shù)中同樣適用，但是需要改變寫法，先來看看不改變寫法會(huì)怎么樣：

+ async function validate() {
  throw new Error("validate failed");
}
+ async function submit() {
  validate();
  fetch("/api/submit", {
    // ...
  });
}

咦，為什么拋出異常不生效了呢，要解答這個(gè)問題，首先得把這段代碼“翻譯”一下：

function validate() {
+  return Promise.reject(new Error("validate failed"));
}

顯然這里函數(shù)沒有真正拋出異常，而是被 Promise 攔截掉了，導(dǎo)致退出函數(shù)失敗。這里只需要增加一個(gè) await 就可以退出函數(shù)了：

async function submit() {
+  await validate();
  fetch("/api/submit", {
    // ...
  });
}

異步函數(shù) reject

上面說了拋出異?？梢酝顺霎惒胶瘮?shù)，但是不僅僅這一種方式，還可以通過 Promise.reject 退出異步函數(shù)：

async function validate() {
  return Promise.reject();
}

所以如果想退出函數(shù)可以先將函數(shù)改為 async 函數(shù)，然后返回一個(gè) reject 狀態(tài)的 Promise，這樣就能夠退出函數(shù)了。

總結(jié)

最后，總結(jié)一下所有退出函數(shù)的方法：

• 函數(shù)返回一個(gè)布爾值，根據(jù)這個(gè)布爾值判斷是否 return 退出函數(shù)
• 拋出異常退出函數(shù)，注意異步函數(shù)需要加上 await，否則無法退出
• 將普通函數(shù)轉(zhuǎn)為異步函數(shù)，然后返回一個(gè) reject 狀態(tài)的 Promise，也可以實(shí)現(xiàn)退出函數(shù)的目的

到此這篇關(guān)于淺析JavaScrip如何實(shí)現(xiàn)優(yōu)雅地退出函數(shù)的文章就介紹到這了,更多相關(guān)JavaScrip退出函數(shù)內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家

最新評(píng)論