奋斗的宽

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()