vue-cil3.0 用axios + vuex 封装http请

本文章个人观点仅供参考。如果有更好的方式方法，欢迎交流。

文件目录

-- src
  |_ api
  |  |_ index.js
  |  |_ http.js  // 定义axios实例
  |  |_ server
  |     |_ user.js  // 定义接口文档
  |     |_ shop.js  // 定义接口文档
  |_ store
  |  |_ getters.js
  |  |_ action.js
  |  |_ moutation
  |  |_ state.js
  |_ main.js
  |_ router.js
  |_ store.js
  ...
-- .env.development // 本地环境配置
-- .env.production // 生产环境配置
-- package.json
-- vue.config.js

1. /src/api/http.js

import axios from 'axios';
import qs from 'qs';
import { Toast } from 'vant';

let instance = axios.create({
    timeout: 60000,
})

instance.interceptors.request.use(req => {
    return req;
})
instance.interceptors.response.use(({ data })=> {
    if (data.code != 200) { // 这个不是res.code， 而是后端人员自定义的，根据自己项目实际情况来决定
        Toast({
            message: data.msg,
            timeout: 1500,
            icon: 'fail',
        })
    }
    return data
}, err => {
    Toast({
        message: `请求失败：错误信息 \n${err.message}`
        timeout: 1500,
    })
})


export default (method, url, data = null) => {
    method = method.toLowerCase();
    if (method == 'post') {
        return instance.post(url, qs.stringify(data))
    }else if (method == 'get') {
        return instance.get(url, {params: data})
    }
}

2. /src/api/server/user.js

module.exports =  {
    newMember: {
        url: '/wx/newMember',
        method: 'get',
    },
    getMemberByWx: {
        url: '/wx/getMemberByWx',
        method: 'get',
    },
}

3. /src/api/server/shop.js

module.exports =  {
    getAllShopCarProduct: {
        url: head + '/getAllShopCarProduct',
        method: 'get',
    },
    addShopCar: {
        url: head + '/addShopCar',
        method: 'post',
    },
}

4. /src/api/index.js

import req from './http.js'

const context = require.context('@/apis/server/', true, /\.js$/);
let urlObj = {}, getUrl = {};
context.keys().forEach(url => {
    let name = url.split('/').slice(1)[0].split('.')[0];
    Object.assign(urlObj, require(`@/apis/server/${name}`))
})
let head = url => process.env.VUE_APP_HOST + url;

for (let key in urlObj) {
    let item = urlObj[key];
    Object.assign(getUrl, {[key]: (params = {}) => req(item.method, head(item.url), params)})
}

export default getUrl

5. /src/store/action.js

import getUrl from '@/api/index'

let httpData = {};
for (let key in getUrl) {
    httpData[key] = async ({ commit }, params = {}) => await getUrl[key](params)
}

export default {
    ...httpData
}

6. /src/store.js

import Vue from 'vue'
import Vuex from 'vuex'
import actions from '@/store/action'
import mutations from '@/store/mutations'
import getters from '@/store/getters'
import state from '@/store/state'

Vue.use(Vuex)

const store = new Vuex.Store({
    mutations,
    actions,
    getters,
    state,
})
export default store

7. .env.development

VUE_APP_HOST=/apis

8. .env.production

NODE_ENV=production
VUE_APP_HOST=http://0.0.0.0:8080

9. package.json

{
    "scripts": {
        "dev": "vue-cli-service serve",
        "build": "vue-cli-service build --mode production",
    },
}

10. vue.config.js

module.exports = {
    // 反向代理配置
    devServer: {
        proxy: {
            '/apis': {
                target: 'http://1.1.1.1:8090',
                changeOrigin: true,
                pathRewrite: {
                    '^/apis': ''
                },
            }
        }
    },
}

使用方法

方法一

import { mapActions } from 'vuex'
export default {
    mounted() {
        this.addshopcar()
    },
    methods: {
        ...mapActions([
            'addShopCar'
        ]),
        addshopcar() {
            let params = {
                productId: 'p10086' 
            }
            this.addShopCar(params).then(data => {
                 // 返回数据进行处理
            })
        }
    }
}

方法二

import { mapActions } from 'vuex'
export default {
    mounted() {
        this.newMember().then(this.newmember)
    },
    methods: {
        ...mapActions([
            'newMember'
        ]),
        newmember(data) {
            // 返回数据进行处理
        }
    }
}

方法三

export default {
    mounted() {
        this.addshopcar()
    },
    methods: {
        addshopcar() {
            this.$store.dispatch('addShopCar', {productId: 'p10086'}).then(data => {
                // 返回数据进行处理
            })
        }
    }
}

希望对刚入行的同学提供一点点思路。