axios + vuex 封装请求后台数据

自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)
                    }
                })
       }
  }
}

现在比较粗糙，后续更新详细。