公司项目使用了vue作为技术栈，便理所应当地使用了官方推荐的axios进行网络请求，这里记录下axios的封装方法，以备以后也能优雅的使用。
ajax.js：
/*引入axios*/
import axios from 'axios'
/*创建axios实例对象*/
const ajax = axios.create({
baseURL: ajaxUrl,
timeout: 30000
})
/*请求拦截器（请求之前的操作）*/
ajax.interceptors.request.use(
config => {
return config
},
/*错误操作*/
err => {
return Promise.reject(err)
}
)
/*请求之后的操作*/
ajax.interceptors.response.use(
config => {
return config
},
err => {
return Promise.reject(err)
})
/*导出模块*/
export default ajax
api.js：
import ajax from '../libs/ajax'
const captcha = () => {
return ajax.get(`app/captcha`)
}
const login = (params) => {
return ajax.post(`auth/login`, params)
}
const apiList = {
captcha,
login
}
export default apiList
index.js：
将导出的api请求挂在到vue原型上
import apiList from './api'
const install = function (Vue) {
if (install.installed) return
install.installed = true
/*定义属性到Vue原型中*/
Object.defineProperties(Vue.prototype, {
$api: {
get () {
return apiList
}
}
})
}
export default {
install
}
main.js：
/*引入index.js*/
import api from '.xxx'
Vue.use(api)
按以上模板进行封装之后，就可以在需要的地方直接发起api请求了，如下：
this.$api.login(params).then(res => {
/*请求成功后的操作*/
}).catch(err => {
/*请求失败后的操作*/
})
