Vue中怎樣封裝與使用公共狀態屬性元件實現類似列舉類的效果
阿新 • • 發佈:2020-09-02
場景
如果一個狀態量在多個地方用到,或者一個業務用到多個狀態量。
可以使用類似列舉類代替直接使用明文表示。
這樣如果需要修改狀態量的值就不用再每個地方都要修改。
Vue中要實現同樣的效果,比如自定義一些錯誤碼。
即401代表什麼,403代表什麼,預設的錯誤碼返回什麼。
注:
部落格:
https://blog.csdn.net/badao_liumang_qizhi
關注公眾號
霸道的程式猿
獲取程式設計相關電子書、教程推送與免費下載。
實現
首先在專案目錄下新建utils目錄,在此目錄下新建errorCode.js
export default { '401': '認證失敗,無法訪問系統資源','403': '當前操作沒有許可權', '404': '訪問資源不存在', 'default': '系統未知錯誤,請反饋給管理員' }
按照以上格式自定義一些錯誤碼以及預設錯誤碼。
然後在需要使用的地方,這裡假設是登入時傳送請求的js中
import errorCode from '@/utils/errorCode'
引入該元件
則可以用如下的形式使用錯誤碼
// 未設定狀態碼則預設成功狀態 const code = res.data.code || 200; // 獲取錯誤資訊 const message = errorCode[code] || res.data.msg || errorCode['default']
code是後臺返回的狀態碼,然後去erroeCode中通過errorCode[code]的形式去匹配
或者直接指定
errorCode['default']
獲取預設的錯誤碼即'系統未知錯誤,請反饋給管理員'