vue开发封装思路--api篇

开发过程中不一样的api封装

• 我们一般会在api目录下新建js文件来封装接口，然后再各个页面去引入来调用，这样需要在每个页面都要import 引入这些js文件，这样比较麻烦，
• 我们可以在api文件夹下新建一个文件来处理这些，然后混入，就不需要每个页面都引入这些js文件，直接通过this来调接口

import loginApi from '@/api/loginApi'
import homeApi from '@/api/home'
export default {
  methods: {
    loginApi(api, data, callBack) {
      var fn = Array.prototype.pop.apply(arguments)
      const query = Array.prototype.shift.apply(arguments)
      loginApi[query](...arguments).then(fn)
    },
    homeApi(api, data, callBack) {
      homeApi[api](data).then(callBack)
    },
    async homeApiAsync(api, data, callBack) {
      const res = await homeApi[api](data)
      return res
    },
    async loginApiAsync(api, data, callBack) {
      const res = await loginApi[api](data)
      callBack(res)
    },
    sureOpen(callback) {
      this.$confirm('此操作将永久删除, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        callback()
      })
    }
  }
}

home.js
import request from '@/utils/request'
class HomeApi {
    getStatusItemList(data) {
        return request({
            url: '/api/projectStatus/getStatusItemList',
            method: 'post',
            params: data
        })
    }
}
export default new HomeApi()

login.js

import request from '@/utils/request'
class LoginAdmin {
  // 登录接口
  loginAuthApi(data) {
    return request({
      url: '/loginapi/system/user/login',
      method: 'post',
      data
    })
  }
}
export default new LoginAdmin()

• 在main文件中全局混入

import commonApi from '@/api'
Vue.mixin(commonApi)