vue3网络请求问题

在vscode里面用vue3写代码在axios网络请求遇到了问题,想问问有没有好人知道怎么解决。(PS:本人代码初学者)

img

没安装router吧。
pip install router

不知道你这个问题是否已经解决, 如果还没有解决的话:
  • 你可以参考下这个问题的回答, 看看是否对你有帮助, 链接: https://ask.csdn.net/questions/7780240
  • 除此之外, 这篇博客: vue在axios响应拦截器中对状态码code进行相应处理中的  2.在响应拦截器中判断code 部分也许能够解决你的问题, 你可以仔细阅读以下内容或者直接跳转源博客中阅读:
    // 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;
    


如果你已经解决了该问题, 非常希望你能够分享一下解决方案, 写成博客, 将相关链接放在评论区, 以帮助更多的人 ^-^