Vue項目中Api的組織以及返回數據處理的操作

這篇文章主要介紹“Vue項目中Api的組織以及返回數據處理的操作”，在日常操作中，相信很多人在Vue項目中Api的組織以及返回數據處理的操作問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”Vue項目中Api的組織以及返回數據處理的操作”的疑惑有所幫助！接下來，請跟著小編一起來學習吧！

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

在配置文件中，Api 的配置采用 Http請求方式 url 的方式，默認情況下 GET 可以不寫，請求方式統一采用大寫形式，動態參數采用 : 占位符 的形式。

// 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
    // 取消后續請求
    cancel(res.msg)
    // 更新store及localStorage狀態
    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 || '服務器返回錯誤'
   popupMsg(errMsg)
   return Promise.reject(errMsg)
  }
  return res
 },
 error => {
  // 超時
  if (error.message.includes('timeout')) {
   const errMsg = '網絡請求超時， 請稍后重試'
   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

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

在開發后臺管理系統項目時，基本都會用到Vuex。在實際的開發過程中通常會按功能進行分 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 方法中是可以直接調用返回結果，為什么在這里還多此一舉呢？是因為有些時候一個接口的參數需要加工處理，在每個頁面處理明顯代碼冗余，修改不方便，同時也會出現獲取同樣的數據但是不同的頁面后端給到的是不同的接口，這里就可以做到根據參數來明確需要哪個接口。

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

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

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

還有一個問題在使用 echarts 時，根據一些篩選來動態改變圖表繪制時，會發現從 mapState 和 getters 中并不能獲取到最新的數據，還得手動寫一長串的 this.$store.state.moduleA.moduleB.xxx.state ，當然我們也可以使用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... 。

到此，關于“Vue項目中Api的組織以及返回數據處理的操作”的學習就結束了，希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學習，快去試試吧！若想繼續學習更多相關知識，請繼續關注億速云網站，小編會繼續努力為大家帶來更多實用的文章！