快捷導(dǎo)航

Vue項目中Api的組織和返回數(shù)據(jù)處理的操作

更新時間：2019年11月04日 10:02:25 作者：jenemy

這篇文章主要介紹了Vue項目中Api的組織和返回數(shù)據(jù)處理的操作，本文給大家介紹的非常詳細，具有一定的參考借鑒價值,需要的朋友可以參考下

項目中的所有Api配置放在一個文件中，便于查找和修改，Api的版本從配置文件(config.js)中讀取，采用 apiPrefix + url 的形式組成。

在配置文件中，Api 的配置采用 Http請求方式 url 的方式，默認(rèn)情況下 GET 可以不寫，請求方式統(tǒng)一采用大寫形式，動態(tài)參數(shù)采用 : 占位符的形式。

// services/api.js
export default {
 login: 'POST /login',
 logout: '/logout',
 queryUser: '/user/:id'
}

然后需要一個方法在解析上面的Api配置

// services/index.js
import request from '../utils/request'
import api from './api'
const gen = params => {
 let url = params
 let method = 'GET'
 const paramsArr = params.split(' ')
 if (paramsArr.length === 2) {
  method = paramsArr[0]
  url = paramsArr[1]
 }
 return data => {
  return request({
   url,
   data,
   method
  })
 }
}
const apiFunc = {}
for (const key in api) {
 apiFunc[key] = gen(api[key])
}
export default apiFunc

上面代碼中的 request 是封裝 axios 后暴露出來的方法，代碼如下：

// utils/request.js
import axios from 'axios'
import store from '../store'
import { apiPrefix } from './config'
import { Message, MessageBox } from 'element-ui'
let cancel
const CancelToken = axios.CancelToken
const service = axios.create({
 baseURL: apiPrefix,
 timeout: 3000,
 cancelToken: new CancelToken(c => cancel = c)
})
service.interceptors.response.use(
 response => {
  const resType = response.config.responseType
  const res = response.data
  // 二進制文件
  if (resType && resType !== 'json') {
   const filename = response.headers['content-disposition'].split('filename=')[1]
   return {
    filename,
    blob: res
   }
  }
  if (res.code !== 200) {
   // 登錄失效
   if (res.code === 401) {
    let timer = null
    // 取消后續(xù)請求
    cancel(res.msg)
    // 更新store及l(fā)ocalStorage狀態(tài)
    store.commit('user/RESET_LOGIN_STATE', false)
    MessageBox.confirm('登錄已失效，請重新登錄', '提示', {
     confirmButtonText: '確定',
     showClose: false,
     showCancelButton: false,
     type: 'warning'
    }).then(() => {
     clearTimeout(timer)
     reload()
    })
    timer = setTimeout(reload, 1000)
   }
   const errMsg = res.msg || '服務(wù)器返回錯誤'
   popupMsg(errMsg)
   return Promise.reject(errMsg)
  }
  return res
 },
 error => {
  // 超時
  if (error.message.includes('timeout')) {
   const errMsg = '網(wǎng)絡(luò)請求超時， 請稍后重試'
   popupMsg(errMsg)
   cancel(errMsg)
  }
 }
)
function reload() {
 window.location.href = `${window.location.origin}/#/login`
 window.location.reload()
}
function popupMsg(msg, sec = 5000) {
 Message({
  message: msg,
  type: 'error',
  duration: sec
 })
}
export default service

在封裝的過程中處理了網(wǎng)絡(luò)請求超時、下載表數(shù)據(jù)時后端直接返回二進制文件的情況、登錄失效后取消后續(xù)接口請求。

在開發(fā)后臺管理系統(tǒng)項目時，基本都會用到Vuex。在實際的開發(fā)過程中通常會按功能進行分 module ，在 xx.vue 文件中直接通過 mapActions 來注入帶副作用的方法。

// store/common.js
import service from '../services'
const actions = {
 async login(data) {
  const res = await service.login(data)
  return Promise.resolve(res)
 }
}
export default {
 namespaced: true,
 state: {},
 getters: {},
 mutations: {},
 actions
}

其實在上面的 apiFunc 方法中是可以直接調(diào)用返回結(jié)果，為什么在這里還多此一舉呢？是因為有些時候一個接口的參數(shù)需要加工處理，在每個頁面處理明顯代碼冗余，修改不方便，同時也會出現(xiàn)獲取同樣的數(shù)據(jù)但是不同的頁面后端給到的是不同的接口，這里就可以做到根據(jù)參數(shù)來明確需要哪個接口。

在封裝的 action 中，有些時候是不需要返回數(shù)據(jù)(Promise)，因為完全可以整個頁面的數(shù)據(jù)狀態(tài)全部放在state中，接收到數(shù)據(jù)后直接通過 commit 一個 mutation 來修改 state ，在頁面中直接把所有的數(shù)通過 mapState 或者直接 this.$store.state.xx 來訪問。如果想要綁定state中的狀態(tài)到 v-model ，可以在 computed 中定義 get 和 set 來實現(xiàn)，例如：

export default {
 computed: {
  dateType: {
   get() {
    return this.$store.state.device.dateType
   },
   set(val) {
    // 一些處理，比如根據(jù)日、周、月來動態(tài)改變`el-datep-icker`的配置
   }
  }
 }
}

在項目中不建議把頁面中的所有狀態(tài)全部放在vuex中處理，除了一些全局狀態(tài)和一些組件之間具有聯(lián)動效應(yīng)的。因為在當(dāng)前路由切換到其它路由, vuex中 state 的數(shù)據(jù)是沒有被重置的，再切回來會發(fā)現(xiàn)原有的數(shù)據(jù)并沒有變化等問題。而且一旦在定義 state 時嵌套太多，重置就很麻煩了。

還有一個問題在使用 echarts 時，根據(jù)一些篩選來動態(tài)改變圖表繪制時，會發(fā)現(xiàn)從 mapState 和 getters 中并不能獲取到最新的數(shù)據(jù)，還得手動寫一長串的 this.$store.state.moduleA.moduleB.xxx.state ，當(dāng)然我們也可以使用vuex提供的便捷映射方法 const { mapState } = createNamespacedHelper('some/nested/module') ，但是有一個問題是一旦同一個頁面引用的 module 很多，就涉及到取多個不同的別名問題了。

在項目中使用方式如下：

import { mapActions } from 'vuex'
import apiFunc from '../services'

export default {
 methods: {
  ...mapActions('common', [
   'login'
  ]),
  async onLogin() {
   const params = {}
   const res = await apiFunc.login(params)
  }
 }
}

注意在使用 async/await 時如果外層的錯誤沒有捕捉到，最好加一層 try...catch... 。

您可能感興趣的文章: