Vue项目api接口封装、拆分管理

项目使用vue-cli+axios，看了很多项目在api封装时候都是以函数方法定义的，我们推荐使用对象进行定义，再由一个index.js进行统一分发，函数的部分也方便日后改造

结果预览：

api内容管理

const user = {
  get: {
    name: '获取用户列表',
    type: 'post',
    path: '/user/get'
  },
  add: {
    name: '添加用户',
    type: 'post',
    path: '/user/add'
  },
  edit: {
    name: '编辑用户',
    type: 'post',
    path: '/user/edit'
  }
}

– 业务代码中调用api

async editUser() {
  const params = {
    //your param
  }
  const res = await this.$api.user.edit(params)
}

---

操作步骤

目录结构
src
– api
– -- modules 不同模块的业务api
– -- – demo.js 业务模块
– -- index.js 用于api函数注册
– -- request.js 用于axios对象定义

1.定义axios: /src/api/request.js
在这个步骤中我们可以定义axios的全局配置、请求拦截、响应拦截，这一步中安装qs来处理form-urlencoded的post请求

import axios from 'axios'
import qs from 'qs'

const service = axios.create({
  timeout: 20000
})

service.defaults.headers.common['Content-Type'] = 'application/json'

service.interceptors.request.use(
  config => {
    if (config.method === 'post' && config.headers['Content-Type'] === 'application/x-www-form-urlencoded') {
      config.data = qs.stringify(config.data)
    }
    return config
  },
  error => {
    Promise.reject(error)
  }
)

service.interceptors.response.use(
  response => {
    return response.data
  },
  error => {
    return Promise.reject(error)
  }
)

export default service

2.定义api业务接口: /src/api/modules/demo.js

const user = {
  get: {
    name: '获取用户列表',
    type: 'post',
    path: '/user/get'
  },
  add: {
    name: '添加用户',
    type: 'post',
    path: '/user/add'
  },
  edit: {
    name: '编辑用户',
    type: 'post',
    path: '/user/edit'
  }
}

const company = {
  get: {
    name: '获取企业列表',
    type: 'post',
    path: '/company/get',
  }
}

const usetTest = {
  add: {
    name: '这是一个示例接口，你可以单独改变它的请求域名或请求头参数',
    type: 'post',
    path: '/user/add',
    host: 'http://www.baidu.com',
    headers: {
      'Content-Type': 'multipart/form-data'
    }
  }
}

export default { user, company, usetTest }

3.注册api函数: /src/api/index.js
在这里我们引入axios实例与业务模块统一进行函数注册

import request from './request'
import demo from './modules/demo'

const modules = {
  ...demo
}

const api = (type, url, params = {}, options = {}) => {
  if (type === 'get') {
    return request({
      url,
      method: 'get',
      params,
      ...options
    })
  } else if (type === 'post') {
    return request({
      url,
      method: 'post',
      data: params,
      ...options
    })
  }
}

const baseHost = process.env.VUE_APP_URL

const result = {}

for (const module in modules) {
  const methods = modules[module]
  result[module] = {}
  for (const method in methods) {
    const { type, path, host, headers = {} } = methods[method]
    result[module][method] = (parmas = {}, options = {}) => {
      const url = (options.host || host || baseHost) + path
      return api(type, url, parmas, { ...options, headers: { ...headers, ...options.headers }, host: null })
    }
  }
}

export default result

4.挂载api方法: /src/main.js
将方法挂载至vue的原型中

import api from './api'
Vue.prototype.$api = api

---

#####最后我们就可以在项目中使用了
1.常规用法

async editUser() {
  const params = {
    item: {
      id: 1,
      name: '张三'
    }
  }
  const res = await this.$api.user.edit(params)
}

2.扩展用法
axios有许多扩展参数，我们也可以在请求api时候带入，例如onUploadProgress、onDownloadProgress等

async editUser() {
  const params = {
    item: {
      id: 1,
      name: '张三'
    }
  }
  const res = await this.$api.user.edit(params, {
    headers: { //自定义头部
      username: 'test'
    },
    onUploadProgress: e => { //处理上传进度事件
      console.log('onUploadProgress:', e)
    },
    onDownloadProgress: e => { //处理下载进度事件
      console.log('onDownloadProgress:', e)
    }
  })
}