/**axios封装
* 请求拦截、相应拦截、错误统一处理
*/
import axios from 'axios'
import qs from 'qs'
import { Message } from 'element-ui'
// 环境的切换
if (process.env.NODE_ENV == 'development') {
axios.defaults.baseURL = '';
} else if (process.env.NODE_ENV == 'debug') {
axios.defaults.baseURL = '';
} else if (process.env.NODE_ENV == 'production') {
axios.defaults.baseURL = '';
}
// 请求超时时间
axios.defaults.timeout = 10000
// post请求头
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded; charset=UTF-8'
// 请求拦截器
axios.interceptors.request.use(
config => {
const access_token = localStorage.getItem('access_token')
access_token && (config.headers.access_token = access_token)
return config
},
error => {
return Promise.reject(error)
}
)
// 响应拦截器
axios.interceptors.response.use(
(res) => {
if (res.status === 200) {
return Promise.resolve(res)
} else {
return Promise.reject(res)
}
},
error => {
// 服务器状态码不是200的情况
if (error.response.status) {
switch (error.response.status) {
case 401:
Message.error('未登录')
toLogin()
break
case 403:
Message.warning('登录过期,请重新登录')
localStorage.removeItem('access_token')
setTimeout(() => {
toLogin()
}, 1000)
break
case 404:
Message.error('网络请求不存在')
break
default:
Message.error(error.response.data.msg)
}
return Promise.reject(error.response)
}
}
)
/**
* 跳转登录页
* 携带当前页面路由,以期在登录页面完成登录后返回当前页面
*/
const toLogin = () => {
router.replace({
path: '/login',
query: { redirect: router.currentRoute.fullPath }
})
}
export function get(url, params) {
return new Promise((resolve, reject) => {
axios.get(url+'?access_token='+localStorage.getItem('access_token'), {
params: params
}).then(res => {
if (res.data.code == 0) {
resolve(res.data)
} else {
Message.error(res.data.msg)
}
}).catch(err => {
reject(err.data)
})
})
}
export function post(url, params) {
return new Promise((resolve, reject) => {
axios.post(url+'?access_token='+localStorage.getItem('access_token'), qs.stringify(params)).then(res => {
resolve(res.data)
}).catch(err => {
reject(err.data)
})
})
}
vue axios请求拦截 响应
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。
相关阅读更多精彩内容
- 1、登录拦截 项目中某些页面需要用户登录后才可以访问,在路由配置中添加一个字段requireAuth 在在rout...
- 第一步: npm 安装axios,文件根目录下安装,指令如下 第二步: 配置 文件,它是整个项目的统一配置文件...
- axios的baseURL的理解 当url设置的详细的时候,那么baseURL无效 当url设置为 /list ,...