Vue项目中Api的组织和返回数据处理的操作（vue调用api）

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

// 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

// 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

// 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
}

export default {
 computed: {
  dateType: {
   get() {
    return this.$store.state.device.dateType
   },
   set(val) {
    // 一些处理，比如根据日、周、月来动态改变`el-datep-icker`的配置
   }
  }
 }
}

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

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