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/>'
})

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

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 203,547评论 6 477
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,399评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 150,428评论 0 337
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,599评论 1 274
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,612评论 5 365
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,577评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,941评论 3 395
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,603评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,852评论 1 297
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,605评论 2 321
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,693评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,375评论 4 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,955评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,936评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,172评论 1 259
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 43,970评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,414评论 2 342