前端 简化后台项目【增删该查禁用启用】

request.js http封装（此处仅用于测试）

export default const request = (params) => {
  return new Promise(resolve => {
    setTimeout(() => {
      resolve(params)
    }, 1000)
  })
}

BaseApi 基础增删该查类

import request from './request.js
'
/**
 * 基础增删该查类
 * @params object {baseUrl: 和后台约定接口地址}
 * 列表 get：baseUrl
 * 添加 post: baseUrl
 * 修改 put: `${baseUrl}/${'当前数据id'}`
 * 删除 delete: `${baseUrl}/${'当前数据id'}`
 * 状态更改 patch: `${baseUrl}/${当前数据id}/${'当前状态' ? 'forbid' : 'resume'}`
 */

export default class BaseApi {
  constructor(baseUrl) {
    if (!baseUrl) throw `baseApi params need a baseUrl`
    this.baseUrl = baseUrl
    this.request = request
  }

  list(params) {
    return this.request({
      baseUrl: this.baseUrl,
      params
    })
  }

  add(data) {
    return this.request({
      baseUrl: this.baseUrl,
      method: 'post',
      data
    })
  }

  update(data) {
    return this.request({
      baseUrl: `${this.baseUrl}/${data.id}`,
      method: 'put',
      data
    })
  }

  remove(id) {
    return this.request({
      baseUrl: `${this.baseUrl}/${id}`,
      method: 'delete'
    })
  }

  changeStatus(data) {
    // 根据状态拼接禁用启用地址
    const url = `${this.baseUrl}/${data.id}/${data.status ? 'resume' : 'forbid'}`
    return this.request({
      url,
      data,
      method: 'patch'
    })
  }
}

继承基础类【例如用户管理】

// 继承基础类，有特殊规则可以在子类中复写，或者添加其他接口管理
class UserApi extends baseApi {
  constructor(props) {
    super(props)
  }

  addInfo(data) { // 增删改查禁用启用之外得其他接口
    return this.request({
      url: 'http://baidu.com',
      method: 'post',
      data
    })
  }
}

  /**
 * @param1 baseUrl string
 * @param2 自定义参数
 */
const userApi = new UserApi('http://www.baidu.com')

export default userApi

项目内部调用接口

import userApi from './userApi'
// 测试使用
async function test() {
  const list = await userApi.list({page: 1, size: 10})
  console.log('查询用户列表', list)

  const addRes = await userApi.addInfo({ age: 25 })
  console.log('其他自定义接口', addRes)
}
test()