SpringBoot + Spring Cloud +Vue 管理系统前端搭建(三、工具模块封装)
此文转载乐字节
封装axios模块
背景
使用axios发起一个请求是比较简单的事情,但是axios没有进行封装复用,项目越来越大,会引起越来越多的冗余代码,让代码变的越来越难维护,所以我们对axios进行二次封装,使项目中各个组件能够复用请求,让代码变得更容易维护。
要点
统一url配置。
统一api请求
request请求拦截
response拦截器
根据需求,结合vuex做全局的loading动画,或者错误处理
将axios封装成vue插件使用
文件结构
在src目录下新建http文件夹,用来存放http交互api代码。
api.js、axios.js、config.js、index.js、modules目录
api.js
/*
* 接口统一集成模块
*/
import * as login from './modules/login'
import * as user from './modules/user'
import * as dept from './modules/dept'
import * as role from './modules/role'
import * as menu from './modules/menu'
import * as dict from './modules/dict'
import * as config from './modules/config'
import * as log from './modules/log'
import * as loginlog from './modules/loginlog'
// 默认全部导出
export default {
login,
user,
dept,
role,
menu,
dict,
config,
log,
loginlog
}
axios.js
1、乐字节
这里导入类配置文件的信息(如baseURL、headers、withCredentials等设置)到axios对象
2、发送请求的时候获取token,如果token不存在,说明未登录,就重定向到系统登录,否则带token继续发送请求
3、如果有需要,可以在这里通过response响应拦截器对返回结果进行统一处理后再返回
import axios from 'axios';
import config from './config';
import Cookies from "js-cookie";
import router from '@/router'
export default function $axios(options) {
return new Promise((resolve, reject) => {
const instance = axios.create({
baseURL: config.baseUrl,
headers: config.headers,
timeout: config.timeout,
withCredentials: config.withCredentials
})
// request 请求拦截器
instance.interceptors.request.use(
config => {
let token = Cookies.get('token')
// 发送请求时携带token
if (token) {
config.headers.token = token
} else {
// 重定向到登录页面
router.push('/login')
}
return config
},
error => {
// 请求发生错误时
console.log('request:', error)
// 判断请求超时
if (error.code === 'ECONNABORTED' && error.message.indexOf('timeout') !== -1) {
console.log('timeout请求超时')
}
// 需要重定向到错误页面
const errorInfo = error.response
console.log(errorInfo)
if (errorInfo) {
error = errorInfo.data // 页面那边catch的时候就能拿到详细的错误信息,看最下边的Promise.reject
const errorStatus = errorInfo.status; // 404 403 500 ...
router.push({
path: `/error/${errorStatus}`
})
}
return Promise.reject(error) // 在调用的那边可以拿到(catch)你想返回的错误信息
}
)
// response 响应拦截器
instance.interceptors.response.use(
response => {
return response.data
},
err => {
if (err && err.response) {
switch (err.response.status) {
case 400:
err.message = '请求错误'
break
case 401:
err.message = '未授权,请登录'
break
case 403:
err.message = '拒绝访问'
break
case 404:
err.message = `请求地址出错: ${err.response.config.url}`
break
case 408:
err.message = '请求超时'
break
case 500:
err.message = '服务器内部错误'
break
case 501:
err.message = '服务未实现'
break
case 502:
err.message = '网关错误'
break
case 503:
err.message = '服务不可用'
break
case 504:
err.message = '网关超时'
break
case 505:
err.message = 'HTTP版本不受支持'
break
default:
}
}
console.error(err)
return Promise.reject(err) // 返回接口返回的错误信息
}
)
// 请求处理
instance(options).then(res => {
resolve(res)
return false
}).catch(error => {
reject(error)
})
})
}
config.js
import { baseUrl } from '@/utils/global'
export default {
method: 'get',
// 基础url前缀
baseUrl: baseUrl,
// 请求头信息
headers: {
'Content-Type': 'application/json;charset=UTF-8'
},
// 参数
data: {},
// 设置超时时间
timeout: 10000,
// 携带凭证
withCredentials: true,
// 返回数据类型
responseType: 'json'
}
index.js
乐字节这里把axios注册为Vue插件使用,并将api模块挂载在Vue原型的$api对象上,这样在能获取this引用的地方就可以通过“this.$api.子模块.方法” 的方式调用api了
// 导入所有接口
import api from './api'
const install = Vue => {
if (install.installed)
return;
install.installed = true;
Object.defineProperties(Vue.prototype, {
// 注意,此处挂载在 Vue 原型的 $api 对象上
$api: {
get() {
return api
}
}
})
}
export default install
modules
modules模块下子模块比较多,不方便全贴。这里就以用户管理模块为例。
import axios from '../axios'
/*
* 用户管理模块
*/
// 保存
export const save = (data) => {
return axios({
url: '/user/save',
method: 'post',
data
})
}
// 删除
export const batchDelete = (data) => {
return axios({
url: '/user/delete',
method: 'post',
data
})
}
// 分页查询
export const findPage = (data) => {
return axios({
url: '/user/findPage',
method: 'post',
data
})
}
// 查找用户的菜单权限标识集合
export const findPermissions = (params) => {
return axios({
url: '/user/findPermissions',
method: 'get',
params
})
}
ps:需要自学视频关注B站:免费学习