element ui 菜单封装_Vue + Element UI 实现权限管理系统 前端篇（三）：工具模块封装...

封装 axios 模块

封装背景

使用axios发起一个请求是比较简单的事情，但是axios没有进行封装复用，项目越来越大，会引起越来越多的代码冗余，让代码变得越来越难维护。所以我们在这里先对 axios 进行二次封装，使项目中各个组件能够复用请求，让代码变得更容易维护。

封装要点

统一 url 配置

统一 api 请求

request (请求) 拦截器，例如：带上token等，设置请求头

response (响应) 拦截器，例如：统一错误处理，页面重定向等

根据需要，结合 Vuex 做全局的 loading 动画，或者错误处理

将 axios 封装成 Vue 插件使用

文件结构

在 src 目录下，新建一个 http 文件夹，用来存放 http 交互 api 代码。

config.js：axios 默认配置，包含基础路径等信息。

axios.js：二次封装 axios 模块，包含拦截器等信息。

interface.js ：请求接口汇总模块，聚合模块 API。

index.js：将 axios 封装成插件，按插件方式引入。

config.js

export default{

method:'get',//基础url前缀

baseURL: 'http://localhost:8080/',//请求头信息

headers: {'Content-Type': 'application/json;charset=UTF-8'},//参数

data: {},//设置超时时间

timeout: 10000,//携带凭证

withCredentials: true,//返回数据类型

responseType: 'json'}

axios.js

import axios from 'axios';

import config from'./config';

import qs from'qs';

import Cookies from"js-cookie";

import router from'@/router'

//使用vuex做全局loading时使用//import store from '@/store'

exportdefault function$axios(options) {return new Promise((resolve, reject) =>{

const instance=axios.create({

baseURL: config.baseURL,

headers: {},

transformResponse: [function(data) {

}]

})//request 拦截器

instance.interceptors.request.use(

config=>{

let token= Cookies.get('token')//1. 请求开始的时候可以结合 vuex 开启全屏 loading 动画

//console.log(store.state.loading)

//console.log('准备发送请求...')

//2. 带上token

if(token) {

config.headers.accessToken=token

}else{//重定向到登录页面

router.push('/login