自Vue2.0官方推荐大家使用 axios 开始，axios 被越来越多的人所了解。使用axios发起一个请求对大家来说是比较简单的事情，但是axios没有进行封装复用，项目越来越大，引起的代码冗余。就会非常麻烦的一件事。接触vue也是从vue2.0开始，学习之后，使用axios+vuex+vue封装, 供前后端交互。有需要的朋友，可以参考一下，限于能力有限，如果你有好的建议，欢迎联系我。
参考文档：
vuex文档
Axios 中文说明
项目目录:
-- src
|_ api
| |_ index.js
| |_ ajax.js // 定义axios实例
| |_ Server.js // 接口函数
|_ store
| |_ index.js
| |_ action.js
| |_ moutation
| |_ state.js
|_ router
|_ view
|_ style
...
-- index.html
1. /src/api/ajax.js
import axios from 'axios'
import Vue from 'vue'
/**
* 获取一个新的自定义的axios实例
*/
const ajaxUrl =
process.env.NODE_ENV === 'development'
? window.config.Host.development // 开发环境中的后端地址
: process.env.NODE_ENV === 'production'
? window.config.Host.production // 生产环境中的后端地址
: window.config.Host.test // 测试环境的后端地址
export let ajax = axios.create({
baseURL: ajaxUrl,
timeout: 30000,
withCredentials: true
})
let s = new Vue()
ajaxUser.interceptors.response.use(function(response) {
return response
}, function(error) {
// Vue.$vux.loading.hide()
s.$Modal.error({
content: '网络请求失败！请检查您的网络设置！'
})
return Promise.reject(error)
})
ajax.interceptors.response.use(function(response) {
return response
}, function(error) {
// Vue.$vux.loading.hide()
s.$Modal.error({
content: '网络请求失败！请检查您的网络设置！'
})
return Promise.reject(error)
})
此时，在/index.html中定义变量：
<script>
window.config = {
Host: {
production: './',
development: 'http://10.10.40.66:8080/',
test: 'http://10.10.40.66:8080/'
},
userHost: {
production: 'http://10.10.40.106:9090',
development: 'http://10.10.40.106:9090',
test: 'http://10.10.40.106:9090'
}
}
</script>
2. /src/api/index.js
import Server from './Server.js'
class Api {
constructor() {
Object.assign(this, ...Array.from(arguments))
}
}
export default new Api(Server)
3. /src/api/Server.js
/**
* 本模块主要用于运动健身微服务端提供数据交互功能
* 创建时间： 2018-02-09
*/
import { ajax } from './ajax.js'
/**
* 获取上线的轮播图
*/
async function getShufflingImg() {
let shufflingImgList = await ajax.post('/user/getTrueShuffling')
return shufflingImgList
}
export default {
getShufflingImg,
}
4. /src/store/index.js
import Vue from 'vue'
import Vuex from 'vuex'
import actions from './action'
import mutations from './mutations'
import getter from './getter'
import state from './state'
Vue.use(Vuex)
const store = new Vuex.Store({
mutations,
actions,
getter,
state
})
export default store
5. /src/store/action.js
import api from '@/api'
const actions = {
/**
* 获取上线轮播图
*/
async getShufflingImg() {
let shufflingImgList = await api.getShufflingImg()
return shufflingImgList
},
}
export default actio
6. 页面调用
// 获取轮播图
export default {
methods: {
getShufflingImg() {
const Vm = this
Vm.$store.dispatch('getShufflingImg')
.then(res => {
if (res.data.status === 1000) {
console.log(res.data.result)
Vm.$store.commit('SET_shufflingImg', res.data.result)
Vm.keepTime = res.data.result[0].keepTime * 1000
} else {
console.log(res.data.msg)
}
})
}
}
}
现在比较粗糙，后续更新详细。
