一種實現簡單且舒服的前端接口異常處理方案

業務邏輯中，在處理接口數據的時候，除了要處理正常狀況，也要處理異常狀況。

處理方案多種多樣，在這裏介紹一個我經常使用的方案，在該方案中，業務代碼只需處理數據正常的狀況，無需處理：數據異常、接口請求報錯（try catch）等。

以 Vue 項目爲例。

該方案的開發體驗

業務代碼中的寫法：

export default {
    async created() {
        const res = await this.getData();
        
        if (res !== null) {
            // 處理正常邏輯
        }
        
        // 若是 res 是 null，則不作任何處理
        // 隱藏的統一處理邏輯會負責錯誤提示等
    },
    
    methods: {
        getData() {
            return this.$ajax({
                // 各種參數
            })
        }
    }
}
複製代碼

效果：

• 業務代碼中只須要處理 res 不爲 null 的狀況，只要 res !== null (true)。

  只要數據返回有值，只處理該狀況便可。

• 隱藏的統一處理邏輯會負責錯誤提示、返回數據格式化等

如何實現

實現方案也很簡單。你們能夠看到上面代碼中用到了 this.$ajax。

在 Vue 中就是新增一個 $ajax 插件便可。代碼以下：

• ajaxPlugin.js

  let $ajax = axios.create({
    // ... 各種配置
  });
      
  let $newAjax = (config) => {
      const $vm = this;
      
      return $ajax(config)
          .then(res => {
              // 這裏統一處理異常狀況
              // 同時也能夠將數據返回值格式統一化
              
              if (res.code !== 200) {
                  $vm.$message.error(res.message);
                  return null;
              } else {
                  return {
                      data: res.data
                  };
              }
          }).catch(err => {
              $vm.$message.error(err);
              return null;
          });
  };
  
  export default {
      install(){
        Vue.prototype.$ajax = $newAjax;
      }
  };
  複製代碼

• index.js

  import ajaxPlugin from './ajaxPlugin';
  Vue.use(ajaxPlugin);
  複製代碼

總結

我在多個項目中實現了這套處理邏輯，在實際的開發體驗中，感受很是不錯。

在這裏分享給你們。