import axios from './api' // 倒入 api /* 将所有接口统一起来便于维护 * 如果项目很大可以将 url 独立成文件，接口分成不同的模块 * 此处的数据依然来自 Easy Mock */ // 单独倒出 export const query = params => { return axios({ url: '/query', method: 'get', params }) } export const mock = params => { return axios({ url: '/mock', method: 'get', params }) } export const upload = data => { return axios({ url: '/upload', method: 'post', data }) } // 默认全部倒出 // 根绝需要进行 export default { query, mock, upload }
index.js
封装成 Vue 插件，便（提）于（高）使（B）用（格）
// 倒入所有接口 import apiList from './interface' const install = Vue => { if (install.installed) return; install.installed = true; Object.defineProperties(Vue.prototype, { // 注意哦，此处挂载在 Vue 原型的 $api 对象上 $api: { get() { return apiList } } }) } export default install
使用
到此为止，万事俱备就差用了，在 mian.js 中做如下操作：
// 倒入 http 文件夹下的 index.js import api from './http/index' Vue.use(api) // 此时可以直接在 Vue 原型上调用 $api 了
总结
以上二次封装较为全面，基本完成了我们之前的需求
在错误的处理上还需要与后端协定好返回值，做具体的约定
封装回调有点多，在使用的时候也需要加上 then() 来处理结果，async & await 了解一下哟，好东西当然要藏起来，我才不会分享出来呢...
PS: IE9 不支持 Promise 哦，需要安装一个 polyfill
import 'babel-polyfill'