前言
在日常的生活中,我们调用不同的接口一般返回值是200,但是不可避免的会出现一些特殊情况,遇到特定的返回值要进行跳转,遇到特定的返回值要进行不同的message提示。。。。。
准备工作
首先我们用的是elementui,使用的框架是vue.
ok,话不多说直接上代码:
http.js:
import axios from 'axios'
// 创建一个axios实例 在其中设置超时时间和响应头
const CancelToken = axios.CancelToken;
const source = CancelToken.source();
import { Notification } from 'element-ui'; //引入组件
const http = axios.create({
baseURL: '/xxx', // api 的 base_url
headers: {
'Content-Type': 'application/json;charset=utf-8', 'BsmAjaxHeader': true
}
})
/**
* 请求拦截
*/
http.interceptors.request.use(config => {
config.cancelToken=source.token;
return config
}, error => {
return Promise.reject(error)
})
/**
* 响应拦截
*/
http.interceptors.response.use(response => {
const code = response.status;
switch (code){
case 200 :
Notification({
title: '成功',
message: '这是一条成功的提示消息',
type: 'success'
})
break;
case 500:
Notification({
title: '错误',
message: '接口不通',
type: 'error'
})
break;
case 404:
Notification({
title: '警告',
message: '这是一条警告的提示消息',
type: 'warning'
})
break;
case 501:
Notification({
title: '消息',
message: '这是一条提示消息',
type: 'info'
})
break;
}
return response
}, error => {
return Promise.reject(error)
})
export default http
遇到特定的返回值要进行路由跳转
那就来个最简单的:
case 510: //证书过期
Notification({
title: '消息',
message: '证书已过期,请颁发新的证书使用',
type: 'info'
})
location.href = '你要跳转的地址';
break;
遇到特定的值要进行状态修改
首先是store里面的状态值:
store.js:
state: {
isLogin: false,
baseURL: {
picAddr: '',
zsAddr: '',
jxszsAddr: '',
syAddr: '',
logoUrl: '',
companyUrl: ''
},
userInfo: {},
testdata:1,
},
changetestdata(state,data){
state.testdata = data;
}
然后是http.js
case 520: //权限发生了改变
Notification({
title: '消息',
message: '权限已重置',
type: 'info'
})
store.commit('changetestdata','1000');
break;
总结:
希望能对大家有所帮助,如果没有适合你的,请先留言,只要是力所能及的,一定会第一时间给出答复