快活林资源网

Vue项目中Api的组织和返回数据处理的操作
网络编程 2024/12/25 佚名
3 1
快活林资源网 Design By www.csstdc.com

项目中的所有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... 。

快活林资源网 Design By www.csstdc.com
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
快活林资源网 Design By www.csstdc.com
www.csstdc.com 快活林资源网
120,135影音资源
344,641技术资源
22,817软件资源
435,032站长资源

更新日志

友情链接

杰晶网络 DDR爱好者之家 桃源资源网 杰网资源 富贵资源网 南强小屋 铁雪资源网 幽灵资源网 万梅资源网 狼山资源网 白云岛资源网 昆仑资源网 相思资源网 明霞山资源网 内蒙古资源网 黑松山资源网 茶园资源网 饿虎岗资源网 大旗谷资源网 常春岛资源网 岱庙资源网 兴国资源网 快活林资源网 蝙蝠岛资源网 帝王谷资源网 白云城资源网 伏龙阁资源网 清风细雨楼 天枫庄资源网 圆月山庄资源网 无争山庄资源网 神水资源网 移花宫资源网 神剑山庄资源网 无为清净楼资源网 金钱帮资源网 丐帮资源网 华山资源网 极乐门资源网 小李飞刀资源网 凤求凰客栈 风云阁资源网 金狮镖局 鸳鸯亭资源网 千金楼资源网 更多链接
快活林资源网 Design By www.csstdc.com