這篇文章主要介紹“Vue項(xiàng)目中Api的組織以及返回?cái)?shù)據(jù)處理的操作”，在日常操作中，相信很多人在Vue項(xiàng)目中Api的組織以及返回?cái)?shù)據(jù)處理的操作問題上存在疑惑，小編查閱了各式資料，整理出簡(jiǎn)單好用的操作方法，希望對(duì)大家解答”Vue項(xiàng)目中Api的組織以及返回?cái)?shù)據(jù)處理的操作”的疑惑有所幫助！接下來，請(qǐng)跟著小編一起來學(xué)習(xí)吧！

創(chuàng)新互聯(lián)-專業(yè)網(wǎng)站定制、快速模板網(wǎng)站建設(shè)、高性價(jià)比潞城網(wǎng)站開發(fā)、企業(yè)建站全套包干低至880元,成熟完善的模板庫(kù),直接使用。一站式潞城網(wǎng)站制作公司更省心,省錢,快速模板網(wǎng)站建設(shè)找我們，業(yè)務(wù)覆蓋潞城地區(qū)。費(fèi)用合理售后完善，10多年實(shí)體公司更值得信賴。

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

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

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

然后需要一個(gè)方法在解析上面的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
  // 二進(jìn)制文件
  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ù)請(qǐng)求
    cancel(res.msg)
    // 更新store及l(fā)ocalStorage狀態(tài)
    store.commit('user/RESET_LOGIN_STATE', false)
    MessageBox.confirm('登錄已失效，請(qǐng)重新登錄', '提示', {
     confirmButtonText: '確定',
     showClose: false,
     showCancelButton: false,
     type: 'warning'
    }).then(() => {
     clearTimeout(timer)
     reload()
    })
    timer = setTimeout(reload, 1000)
   }
   const errMsg = res.msg || '服務(wù)器返回錯(cuò)誤'
   popupMsg(errMsg)
   return Promise.reject(errMsg)
  }
  return res
 },
 error => {
  // 超時(shí)
  if (error.message.includes('timeout')) {
   const errMsg = '網(wǎng)絡(luò)請(qǐng)求超時(shí)， 請(qǐng)稍后重試'
   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ò)請(qǐng)求超時(shí) 、 下載表數(shù)據(jù)時(shí)后端直接返回二進(jìn)制文件的情況 、 登錄失效后取消后續(xù)接口請(qǐng)求 。

在開發(fā)后臺(tái)管理系統(tǒng)項(xiàng)目時(shí)，基本都會(huì)用到Vuex。在實(shí)際的開發(fā)過程中通常會(huì)按功能進(jìn)行分 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
}

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

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

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

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

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

在項(xiàng)目中使用方式如下：

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 時(shí)如果外層的錯(cuò)誤沒有捕捉到，最好加一層 try...catch... 。

到此，關(guān)于“Vue項(xiàng)目中Api的組織以及返回?cái)?shù)據(jù)處理的操作”的學(xué)習(xí)就結(jié)束了，希望能夠解決大家的疑惑。理論與實(shí)踐的搭配能更好的幫助大家學(xué)習(xí)，快去試試吧！若想繼續(xù)學(xué)習(xí)更多相關(guān)知識(shí)，請(qǐng)繼續(xù)關(guān)注創(chuàng)新互聯(lián)網(wǎng)站，小編會(huì)繼續(xù)努力為大家?guī)砀鄬?shí)用的文章！

分享標(biāo)題：Vue項(xiàng)目中Api的組織以及返回?cái)?shù)據(jù)處理的操作
鏈接地址：http://sd-ha.com/article12/iedjgc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供全網(wǎng)營(yíng)銷推廣、微信公眾號(hào)、網(wǎng)站策劃、網(wǎng)站收錄、域名注冊(cè)、網(wǎng)站營(yíng)銷

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)