axios + vue-router + vuex 二次封装

介绍： vue-cli、axios、vue-router、vuex，安装流程不再赘述，文件目录如下：

封装目录.png

一、axios二次封装，参考自：axios二次封装

1、在api目录下创建request文件夹，存放二次封装的axios文件；根据功能需求创建其他文件夹，组件中按需引入使用，如登录模块创建login/login.js文件，存放登录时所需使用的接口。

2、request.js文件为axios的二次封装文件，在请求接口文件中引入，代码如下：

import axios from 'axios'
import { errcode } from './errcode' //捕捉服务端http状态码的方法
import store from '@/store'   //引入vuex的相关操作
import router from '@/router'   //引入vue-router的相关操作

// 添加请求拦截器
axios.interceptors.request.use(
    config => {
        //config 为请求的一些配置 例如：请求头 请求时间 Token 等
        config.timeout = 10 * 1000 //请求响应时间
        config.auth = {
            "token": store.state.token
        }
        return config 
    }, 
    error => {
        return Promise.reject(error)
    }
)

// 添加响应拦截器
axios.interceptors.response.use(
    response => {
        if(response.data.code === 0){    //服务端定义的响应code码为0时请求成功
            return Promise.resolve(response.data)   //使用Promise.resolve 正常响应
        }else if(response.data.code === 1000){  //服务端定义的响应code码为1000时为未登录
            router.push('/login')
            return Promise.reject(response.data)    //使用Promise.reject 抛出错误和异常
        }else{
            return Promise.reject(response.data)
        }
    },
    error => {
        if(error && error.response){    //errcode 捕捉服务端的http状态码
            let res = {}
            res.code = error.response.status
            res.msg = errcode(error.response.status, error.response)
            return Promise.reject(res)
        }else if(error && error.request && error.message.includes('timeout')){  //errcode 捕捉请求超时状态码
            let res = {}
            res.code = 408
            res.msg = errcode(408, error.response)
            return Promise.reject(res)
        }
        return Promise.reject(error)
    }
)

export const request = (method, url, data) => {
    method = method.toLocaleLowerCase() 
    return axios.request({   
        method,
        url,
        data
    })
}

3、errcode.js文件为http请求状态码二次处理，在request.js文件中引入，代码如下：

//axios捕错
export const errcode = (code, response) => {
    let message = '请求错误'
    switch (code) {
        case 400:
            message = '请求错误'
            break
        case 401:
            message = '未授权，请登录'
            break
        case 403:
            message = '拒绝访问'
            break
        case 404:
            message = `请求地址出错: ${response.config.url}`
            break
        case 408:
            message = '请求超时'
            break
        case 500:
            message = '服务器内部错误'
            break
        case 501:
            message = '服务未实现'
            break
        case 502:
            message = '网关错误'
            break
        case 503:
            message = '服务不可用'
            break
        case 504:
            message = '网关超时'
            break
        case 505:
            message = 'HTTP版本不受支持'
            break
        default:
    }
    return message
}

4、login/login.js接口文件引用二次封装的文件，代码如下：

import { request } from '../request/request' //引入axios的封装方法

export const getToken = (params) => {
    return request('get', './static/json/login/token.json', params) 
}

5、登录组件中使用getToken接口，代码如下：

import { getToken } from '@/api/login/login' //引入
let params = {name:'admin'}; //组件方法中调用
getToken(params).then(res => {
    this.$Message.success(res.msg);  //$Message使用了i-view组件，可忽略
    //跳转到首页
    //this.$router.push({path:'/home'});
}).catch(err => {
    this.$Message.error(err.code+':'+err.msg);
});

二、vue-router二次封装

1、router/index.js文件为路由的二次封装文件，代码如下：

import Vue from 'vue'
import Router from 'vue-router'
import routes from './routes'

Vue.use(Router)

const router =  new Router({
  mode: 'history',
  routes: routes
})

//路由前置守卫相关操作
router.beforeEach((to, from, next) => {
  next()  
})

export default router

2、routes.js文件为路由信息，在index.js文件中引入，代码如下：

export default [
    {
      path: '/',
      redirect: '/login',
    },
    {
      path: '/login',
      name: 'login',
      component: () => import('@/components/login/login')
    },
    {
      path: '/home',
      name: 'home',
      component: () => import('@/components/home/home')
    }
]

三、vuex模块化使用，实际上是store 分割成模块（module）

1、store/index.js文件为总目录，引入各个模块，代码如下：

import Vue from 'vue'
import Vuex from 'vuex'
import login from './login/login'

Vue.use(Vuex)

const store =  new Vuex.Store({
    state: {
    },
    mutations: {
    },
    getters: {
    },
    actions: {
    },
    modules: {
        login
    }
})

export default store

2、store/login/login.js文件，存储登录模块的数据信息，其他模块同样操作，代码如下：

const login = {
    state: {
        token: 0
    },
    mutations: {
        loginToken(state,data) {
            state.token = data;
        }
    },
    getters: {
    },
    actions: {
    }
}

export default login

4、最后在main.js主文件中引入到vue中，代码如下：

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'
import store from './store'
import iView from 'iview';  //iview UI组件
import 'iview/dist/styles/iview.css';

Vue.use(iView);

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  store,
  components: { App },
  template: '<App/>'
})

总结，抽离出各个模块，有利于简化目录结构，便于后期维护管理，如有错误，望指正。