promise

promise 的出現，提供了優雅的異步解決方式，但是，多個連續繼發 promise 寫法依然繁瑣。

let promise = new Promise(function(resolve, reject){// ...if(/* 異步任務執行成功 */) {resolve(value)} else {reject(error)} })promise.then(v => {}).catch(e => {}) 復制代碼

async

es6 之后又新增了 async 函數來優化異步寫法，語義化更明確，寫法更優雅，但是錯誤捕獲比較麻煩，一般都得使用 try catch 來捕獲錯誤，具體優點參考阮老師博客 async 函數

function promiseFunc = function(){return new Promise(function(resolve, reject){// ...if(/* 異步任務執行成功 */) {resolve(value)} else {reject(error)}}) }async func(){let res = await promiseFunc() }// 錯誤捕獲 async func(){try{let res = await promiseFunc()}catch(err){alert(err)} }復制代碼

錯誤捕獲優化

如下是工作中 react + mobx 項目中 action 的代碼

class Actions {@actionasync deleteModel(params) {try {await this.post(apis.API_DEPLOY_DELETE, params)this.getDeployList(this.store.searchParams)} catch (e) {message.error(e.message || '出錯了!請稍后重試')}}@actionasync getDirChain(params) {try {let r = await this.post(apis.API_DEPLOY_DIR_CHAIN, params)runInAction(() => {this.store.dirChain = r})} catch (e) {message.error(e.message || '出錯了!請稍后重試')}}} 復制代碼

如上代碼，兩個 action 都是向后端異步請求數據， 每個 action 函數中都用了 try catch 函數，這樣重復寫了幾十個 action 函數

必須干掉 try catch

錯誤捕獲裝飾器嘗試

裝飾器簡潔方便，首先嘗試， class 方法裝飾器函數如下

const tryCatch = msg => (target, name, descriptor) => {const original = descriptor.valueif (typeof original === 'function') {descriptor.value = async function(...args) {try {const result = await original.apply(this, args)return result} catch (e) {message.error(e.message || msg || '出錯了!請稍后重試')}}}return descriptor } 復制代碼

如上代碼，封裝 tryCatch 裝飾器來對每個 action 函數添加 try catch 錯誤捕獲。

屬性方法裝飾器中

• target 指向 class 實例
• name 是被裝飾的方法名
• descriptor 是方法的屬性修飾符

我們可以通過 descriptor.value 獲取到被裝飾的方法，在 try catch 中執行函數，捕獲錯誤或者返回結果

為了靈活提示錯誤信息，裝飾器參數 msg 用來傳入自定義提示文本

• 用法（該用法是錯誤的）

@tryCatch // @tryCatch('運行出錯') @action async getDirChain(params) {let r = await this.post(apis.API_DEPLOY_DIR_CHAIN, params)runInAction(() => {this.store.dirChain = r}) } 復制代碼

以上對 async 函數進行錯誤捕獲的用法是錯誤的

如上的寫法是錯誤的，這種裝飾器只能對同步代碼產生作用，異步的是無效的，之前理解錯誤了

最后還是解決了 try catch 問題

直接 async await 函數封裝就行了，簡單的問題想復雜了。。。

定義請求執行公共函數

/*** @param {string} method request method; ('get', 'post')* @param {string} api request url* @param {object} params payload* @memberof BaseActions*/ request = async (method, api, params = {}) => {const requestFunc = async () => {let r = nulltry {r = await this[method](api, params)} catch (e) {message.error(e.message)}return r}return await requestFunc() } 復制代碼

原有包含 try catch 重復代碼函數修改

@action async getDirChain(params) {let r = await this.request('get', apis.API_DEPLOY_DIR_CHAIN, params)r && runInAction(() => this.store.dirChain = r) } 復制代碼

終于不用不停寫重復代碼了。。。

總結

以上是生活随笔為你收集整理的解决代码中重复的捕获 promise 错误的 try catch 语句的全部內容，希望文章能夠幫你解決所遇到的問題。

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