在vscode里面用vue3写代码在axios网络请求遇到了问题,想问问有没有好人知道怎么解决。(PS:本人代码初学者)
没安装router吧。
pip install router
// response 拦截器 获取后台数据前拦截
service.interceptors.response.use(
response => {
const code = response.data.code || 200 ;//若未设置默认成功状态
switch (code) {
case 200://为200执行该行
return response.data;//成功直接返回
case 1300://为1300执行该行
MessageBox.confirm("登录状态已过期,重新登录", "系统提示", {
confirmButtonText: "重新登录",
type: "warning",
showCancelButton: false,
showClose: false
}).then(() => { window.location.href = '/' })//跳转登录页
.catch(() => { window.location.href = '/' })//跳转登录页
return response.data
default://都不相同执行该行
return response.data
}
},
error => {
console.log("axios中response报错", error);
Message({
showClose: true,
message: error.message,//弹出失败原因
type: 'error'
})
return Promise.reject(error);
}
)
处理特定值时,使用switch语句最佳
若判断为登录失效则通过location对象的href属性进行页面跳转
Location 对象包含有关当前 URL 的信息。
href 属性是一个可读可写的字符串,可设置或返回当前显示的文档的完整 URL。
import axios from "axios";
import { getToken } from '@/utils/auth'
import { MessageBox, Message } from 'element-ui'
const service = axios.create({
baseURL: window.baseUrl,
timeout: 30000,//请求超时时间
headers: {
"Content-Type": "application/json;charset=UTF-8", //表单数据类型
},
withCredentials: true,//自动同步获取后台服务器cookie同步本地
})
// request 拦截器 发送数据到后台服务器前拦截
service.interceptors.request.use(
config => {
if(getToken()) { //判断有无获取到token
config.headers['Authorization'] = getToken() // 携带token
}
return config;
},
error => {
console.log("axios中request报错", error);
return Promise.reject(error);
}
)
// response 拦截器 获取后台数据前拦截
service.interceptors.response.use(
response => {
const code = response.data.code || 200 ;//若未设置默认成功状态
switch (code) {
case 200://为200执行该行
return response.data;//成功直接返回
case 1300://为1300执行该行
MessageBox.confirm("登录状态已过期,重新登录", "系统提示", {
confirmButtonText: "重新登录",
type: "warning",
showCancelButton: false,
showClose: false
}).then(() => { window.location.href = '/' })//跳转登录页
.catch(() => { window.location.href = '/' })//跳转登录页
return response.data
default://都不相同执行该行
return response.data
}
},
error => {
console.log("axios中response报错", error);
Message({
showClose: true,
message: error.message,//弹出失败原因
type: 'error'
})
return Promise.reject(error);
}
)
export default service;