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

╰半夏微凉° 2022-10-29 01:40 193阅读 0赞

> 此篇幅主要介绍、我们是如何做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

![20210207133440910.png][]

使用封装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文件下所使用到的所有常量，包括[多条件搜索弹窗组件][Link 1]中使用到的常量、更多操作数组、Tab数组、[Table组件][Table]使用到的表格字段数组、表格操作对象等等

images就不多解释了

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

[20210207133440910.png]: /images/20221024/f62e3a67de17475a817133fbf2cee23d.png
[Link 1]: https://blog.csdn.net/wz_coming/article/details/113736575
[Table]: https://blog.csdn.net/wz_coming/article/details/113740126