Vue项目中Api的组织和返回数据处理的操作


Posted in Javascript onNovember 04, 2019

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

Javascript 相关文章推荐
Javascript操纵Cookie实现购物车程序
Feb 15 Javascript
学习js在线html(富文本,所见即所得)编辑器
Dec 18 Javascript
JS清除IE浏览器缓存的方法
Jul 26 Javascript
使用jQuery插件创建常规模态窗口登陆效果
Aug 23 Javascript
JS正则表达式获取分组内容的方法详解
Nov 15 Javascript
Javascript前端UI框架Kit使用指南之Kitjs简介
Nov 28 Javascript
JavaScript实现body内任意节点的自定义属性功能示例
Sep 18 Javascript
node错误处理与日志记录的实现
Dec 24 Javascript
VueCli3.0中集成MockApi的方法示例
Jul 05 Javascript
vue新建项目并配置标准路由过程解析
Dec 09 Javascript
js cavans实现静态滚动弹幕
May 21 Javascript
JS如何调用WebAssembly编译出来的.wasm文件
Nov 05 Javascript
JS+CSS实现随机点名(实例代码)
Nov 04 #Javascript
Vue.js页面中有多个input搜索框如何实现防抖操作
Nov 04 #Javascript
详解利用eventemitter2实现Vue组件通信
Nov 04 #Javascript
jQuery实现form表单基于ajax无刷新提交方法实例代码
Nov 04 #jQuery
JS立即执行的匿名函数用法分析
Nov 04 #Javascript
小程序如何自主实现拦截器的示例代码
Nov 04 #Javascript
uni-app微信小程序登录并使用vuex存储登录状态的思路详解
Nov 04 #Javascript
You might like
PHP测试程序运行时间的类
2012/02/05 PHP
apache+codeigniter 通过.htcaccess做动态二级域名解析
2012/07/01 PHP
ThinkPHP控制器间实现相互调用的方法
2014/10/31 PHP
php获取图片信息的方法详解
2015/12/10 PHP
PHP实现的网站目录扫描索引工具
2016/09/08 PHP
PHP/HTML混写的四种方式总结
2017/02/27 PHP
Flash对联广告的关闭按钮讨论
2007/01/30 Javascript
静态图片的十一种滤镜效果--不支持Ie7及非IE浏览器。
2007/03/06 Javascript
一段多浏览器的"复制到剪贴板"javascript代码
2007/03/27 Javascript
基于jQuery实现下拉框
2014/11/24 Javascript
js改变html的原有内容实现方法
2016/10/05 Javascript
bootstrap table配置参数例子
2017/01/05 Javascript
浅谈js中用$(#ID)来作为选择器的问题(id重复的时候)
2017/02/14 Javascript
vue模板语法-插值详解
2017/03/06 Javascript
JavaScript实现的原生态Tab标签页功能【兼容IE6】
2017/09/18 Javascript
Vue中computed与methods的区别详解
2018/03/24 Javascript
vue-router 起步步骤详解
2019/03/26 Javascript
在vue和element-ui的table中实现分页复选功能
2019/12/04 Javascript
[03:03]2014DOTA2西雅图国际邀请赛 Alliance战队巡礼
2014/07/07 DOTA
[47:18]完美世界DOTA2联赛循环赛 IO vs FTD BO2第一场 11.05
2020/11/06 DOTA
Python编写检测数据库SA用户的方法
2014/07/11 Python
聊聊Python中的pypy
2018/01/12 Python
Python检查ping终端的方法
2019/01/26 Python
利用Python的turtle库绘制玫瑰教程
2019/11/23 Python
Python二次规划和线性规划使用实例
2019/12/09 Python
python中rb含义理解
2020/06/18 Python
使用Keras构造简单的CNN网络实例
2020/06/29 Python
Python3合并两个有序数组代码实例
2020/08/11 Python
wedgwood加拿大官网:1759年成立的英国国宝级陶瓷餐具品牌
2018/07/17 全球购物
会计电算化个人自我评价
2013/11/17 职场文书
优秀教师先进事迹
2014/01/22 职场文书
财务支持类个人的自我评价
2014/02/14 职场文书
单位委托函范文
2015/01/29 职场文书
公司表扬信格式
2015/05/04 职场文书
2016年妇联“6﹒26国际禁毒日”宣传活动总结
2016/04/05 职场文书
python 命令行传参方法总结
2021/05/25 Python