vue2.x搭建saas项目系列之七：API接口及常量、基础数据统一维护

此篇幅主要介绍、我们是如何做API接口及常量统一维护，如有不足和建议请留言，在此感谢，项目目前阶段还处在少年，一直在迭代

相信小伙伴们都知道，在同一个项目中，相同的接口会在很多地方被用到，而且在多人开发时，也很难让每个人在开发之前去了解队友负责的模块，这就会导致相同的代码会出现在无数个地方

API

讲api之前，先贴一段封装的request.ts

import axios from 'axios';
import { removeCookie } from '@/utils/auth'
import { Message, MessageBox } from 'element-ui'
const service = axios.create({
  timeout: 5000,
  withCredentials: true              // send cookies when cross-domain requests
})
// 在发送请求之前做些什么
service.interceptors.request.use( (config: any) => {
  return config;
}, (err) => {
  // 对请求错误做些什么
  return Promise.reject(err);
});
// 添加响应拦截器
service.interceptors.response.use((response: any) => {
  // Some example codes here:
  // code == 200: success
  // code == 201: Created
  // code == 401: Unauthorized
  // code == 403: Forbidden
  // code == 404: Not Found
  // code == 506: 未登录 或者失效
  const res = response.data
  if (res.code === 200) {
    return response.data
  } else if (res.code === 506) {
    MessageBox.confirm(
      '登录信息已过期，请重新登录',
      {
        confirmButtonText: '重新登录',
        type: 'error',
        showClose: false,
        showCancelButton: false,
        closeOnClickModal: false,
      }
    ).then(() => {
      removeCookie()
      sessionStorage.clear()
      window.location.href = "/"
    })
  } else {
    Message({
      message: `${res.msg}` || '系统未知错误，请反馈给管理员',
      type: 'error',
      duration: 2000
    })
    return Promise.reject(new Error(res.msg || '系统未知错误，请反馈给管理员'))
  }
}, (error) => {
  Message({
    message: error.message,
    type: 'error',
    duration: 2000
  })
  return Promise.reject(error)
});
export default service

 api目录下会有多个如下文件夹，以及types.d.ts 

使用封装request的GET和POST请求

import request from '@/utils/request';

const DEMO_URL = '/rest/os/dashboard'

export const post = (data: any) => {   
  return request({
    url: `${DEMO_URL}/uuid`,
    method: 'post',
    data
  })
}

export const get = (id: number) => {   
  return request({
    url: `${DEMO_URL}/detail/${id}`,
    method: 'get'
  })
}


  

types.d.ts

export interface IResp {
  /** 响应 code */
  code?: 200;

  /** 响应数据 */
  data?: any;

  /** 消息 */
  msg?: string;
}

模块中引用

import { get, post } from '@/api/demo'

常量、基础数据 

常量和基础数据的统一维护，关系到了后期对于整个项目的把控，baseData、constant、images统一放在assets目录下进行管理

baseData为项目中使用到的基础数据，比如省市区等类似的数据

constant为全局模块的常量，每个模块会有一个.ts文件，.ts文件会包含当前文件名对应的.vue文件下所使用到的所有常量，包括多条件搜索弹窗组件中使用到的常量、更多操作数组、Tab数组、Table组件使用到的表格字段数组、表格操作对象等等

images就不多解释了

到此，API接口及常量、基础数据统一维护-文章结束，原创不易，感谢浏览！