1.封装axios模块
1.1 封装背景
使用axios发起一个请求是比较简单的事情, 但是axios没有进行封装复用, 项目越来越大, 会引起越来越多的代码冗余, 让代码变得越来越难维护, 所以我们在这里先对axios进行二次封装,使项目中各个组件能够复用请求,让代码变得更容易维护.
1.2封装要点
统一url配置.
统一api请求.
request(请求) 拦截器, 例如:带上token等, 设置请求头,
response(响应) 拦截器.倒如:统一错误处理, 页面重定向等.
根据需要, 结合vue x做全局的loading动画, 或者错误处理.
将axios封装成Vue插件使用.
1.3文件结构
在src目录下, 新建一个http文件夹, 用来存放http交互api代码.文件结构如下:
config.js:axios默认配置,包含基础路径等信息.
axios.js:二次封装axios模块, 包含拦截器等信息。
api.js:请求接口汇总模块, 聚合所有模块API.
index.js:将axios封装成插件, 按插件方式引入.
modules:用户管理、菜单管理等子權块API.
1.4 代码说明
1.4.1 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'
}
1.4.2 axios.js
axios拦截器, 可以进行请求拦截和响应拦截, 在发送请求和响应请求时执行一些操作。
(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)
})
})
}
1.4.3 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
1.4.4 api.js
此模块是一个聚合模块,汇合modules目录下的所有子模块API。
/*
* 接口统一集成模块
*/
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
}
1.4.5.user.js
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
})
}
1.4.6.global.js
上面的配置文件中引用了global.js,我们把一些全局的配置、常量和方法放置在此文件中。
/**
* 全局常量、方法封装模块
* 通过原型挂载到Vue属性
* 通过 this.Global 调用
*/
// 后台管理系统服务器地址
// export const baseUrl = 'http://139.196.87.48:8001'
export const baseUrl = 'http://localhost:8001'
// 系统数据备份还原服务器地址
// export const backupBaseUrl = 'http://139.196.87.48:8002'
export const backupBaseUrl = 'http://localhost:8002'
export default {
baseUrl,
backupBaseUrl
}
1.4.7.main.js
修改main.js,导入API模块,并通过Vue.use(api) 语句进行使用注册, 这样就可以通过
“this.$api.子模块.方法”的方式来调用后台接口了。
引入global模块, 并通过Vue.prototype.global=global语句进行挂载, 这样就可以通过
this.global.xx来获取全局配置了。
import Vue from 'vue'
import App from './App'
import router from './router'
import api from './http'
import global from '@/utils/global'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
Vue.use(ElementUI) // 引入Element
Vue.use(api) // 引入API模块
Vue.prototype.global = global // 挂载全局配置模块
new Vue({
el: '#app',
router,
render: h => h(App)
})
1.5 安装js-cookie
在上面的axios.js中,会用到Cookie获取token,所以需要把相关依赖安装一下:
yarn add js-cookie