关于前端封装公共接口请求API文档

话不多说，直接看代码,项目里贴出来的，敏感信息无，放心使用。

请求路径前缀在vue.config.js中配置proxy代理也可以，在文档中配置也可以，按需使用。

// 以下代码表示在vue。config.js中配置代理地址时路径前缀置换为“”
proxy: {
      "/xxxx": {
                target: " http://192.168.12.123:8888",
                changeOrigin: true,
                pathRewrite: {
                        "^/xxxx": ""
                }
        },

项目初期比较适合下边这种声明路径方式。

按理说后端设置好服务器地址后，应该改成上边的形式。

但我懒了就没弄，反正也是我自己维护。

// 声明请求路径前缀,用于区分开发环境和生产环境,实际项目中提测试环境时切换使用
// 生产环境
// const baseUrl = '/xxxx';

// 开发环境
const baseUrl = '';

/**
 * *** 接口api文档 ***
 * 
 * *** 请求方法只能在以下方法中选，注意大小写不能写错,下一层请求封装就不进行判断了 ***
 * ***  [  get  post  put  delete  ]  ***
 * 
 */

// 引入axios
import axios from 'axios';

/**
 * @description 封装axios请求,此处不做try-catch处理，统一在调用处处理
 * @param {String} method 请求方法
 * @param {String} url 请求地址
 * @param {*} params 请求携带参数
 * @returns 结果 response || error
 */
const request = async (method, url, params = null) => {
    method === 'get' ? params = {
        params
    } : params;
    return await axios[method](url, params);
};

// 上传文件（封装路径类型api直接声明即可）
export const uploadFiles = baseUrl + '/xxx/xxx/xxx';

// 下边是常用增删改查格式，怕各位大佬嫌弃写的不全，所以每种类型都写了一条出来。

// 查询用户
export const getUsers = (data) => {
    return request("get", baseUrl + '/xxx/xxx/xxx', data);
}

// 查询用户详情
export const getUsersDetail = (id) => {
    return request("get", baseUrl + `/xxx/xxx/xxx/${id}`);
}

// 新增用户
export const addUsers = (data) => {
    return request("post", baseUrl + '/xxx/xxx/xxx/xx', data);
}

// 修改用户
export const editUsers = (data, id) => {
    return request("put", baseUrl + `/xxx/xxx/xxx/xxx/${id}`, data);
}

// 删除用户
export const delUsers = (data) => {
    return request("delete", baseUrl + '/xxx/xxx/xxx/xxx', data);
}

组件中使用如下：

 // 你的接口文档放在哪，路径就写哪。
import { getUsers } from "@/api/api.js";

const params = {
    page: 1,
    size: 10,
    xxx:xxx   // 用啥参数传啥，不赘述了
}

// 上文说的在调用处处理
// 就是请求回来返回的response在.then()方法中做回调，出了错在.catch()处捕获
getUsers(params).then(res => {
    console.log(res);
}).catch(err => {
    console.log(err);
})