4.配置响应拦截器
安装axios
npm install axios
封装api接口
- 新建文件夹——utils
- utils中新建文件——api.js
api.js
- 导入axios
import axios from 'axios'
- 因为需要用到element中的message弹窗,所以需要引入element-ui
import { Message } from 'element-ui'
写出响应的拦截器
import axios from 'axios'
import {
Message
} from 'element-ui';
// 因为未登录需要跳转到登录页面,所以导入路由
import router from '../router'
// 响应拦截器
// success只是成功连接上端口,并非成功执行(还没有进行操作)
axios.interceptors.response.use(success => {
// 业务逻辑错误
// 判断是否连接到端口,status是正常调用到端口的响应码,调用到接口的时候返回200
if (success.status && success.status == 200) {
// 判断业务逻辑是否错误
/**
* data是后端返回的json对象,
* json对象中有三个属性,
* code:响应码,
* code==500:业务逻辑错误
* code==401:未登录
* code==403:权限禁止
* message:响应信息,
* object:传递携带对象
*/
if (success.data.code == 500 || success.data.code == 401 || success.data.code == 403) {
// 把后端给的提示错误信息显示出来
Message.error({
message: success.data.message
});
return;
}
// 判断有没有提示信息
if (success.data.message) {
// 有提示信息则显示提示信息
Message.success({
message: success.data.message
});
}
}
// 返回显示数据
return success.data;
}, error => {
//没有访问到接口
/**
* code==404:页面找不到了
* 详细请看5.HTTP响应码大全
*/
if (error.response.code == 504 || error.response.code == 404) {
Message.error({
message: '服务器被吃了o(╯□╰)o'
});
} else if (error.response.code == 403) {
Message.error({
message: '权限不足,请联系管理员!'
})
} else if (error.response.code == 401) {
Message.error({
message: '尚未登录,请登录~'
});
// 直接路由替换成登录页('/')
router.replace('/');
} else {
// 如果不是以上状况,那么判断response错误响应中是否有提示信息
if (error.response.data.message) {
// 有错误提示信息返回显示
Message.error({
message: error.response.data.message
});
} else {
// 如果没有提示信息,那么返回未知信息
Message.error({
message: '未知错误!'
});
}
}
return;
});
本文是原创文章,采用 CC BY-NC-ND 4.0 协议,完整转载请注明来自 Eternal Night
评论
匿名评论
隐私政策
你无需删除空行,直接评论以获取最佳展示效果