当请求报错后提示多次,怎么让他提示一次?

在这里插入图片描述
像这样得提示很多边很烦那么

问题原因

当用户时间长了不操作时再次请求就会被后端认为token过期了需要重新登录,请求不到数据所以对用户进行提示,但是由于那个页面请求了多次不同的数据所以提示过多

问题分析

像这样肯定是请求出的问题所以我们往请求方面得文件去找,我这里是请求拦截这个文件出现得问题

import axios from "axios";
import { MessageBox, Message } from "element-ui";
import store from "@/store";
import { getToken, removeToken, getType, removeType } from "@/utils/auth";

window.axiosCancel = []
    // import { Decrypt, Encrypt } from "./utils.js";
    // create an axios instance
    // import qs from "qs";
axios.defaults.headers.post["Content-Type"] = "application/json;";
// import baseURL from "../main";

const service = axios.create({
  
	baseURL:"http://123221312/api/"

        // baseURL: "/api" //打包线上地址
        // baseURL: '/', // url = base url + request url
        // withCredentials: true // send cookies when cross-domain requests
        // timeout: 100000 // request timeout
});
console.log(axios.create({ baseURL: "http://124.88.68.242:9001/api/" }));
service.interceptors.request.use(config => {
    // let str = config.url;
    // // console.log(str.split('/'));
    config.cancelToken = new axios.CancelToken(cancel => {
        window.axiosCancel.push({ cancel });
    })
    if (store.getters.token) {
        config.headers["token"] = store.getters.token;
    } else {
        console.log("无token");
    }

    // if (
    //   Object.prototype.toString.call(config.data) !== "[object FormData]" &&
    //   config.method === "post"
    // ) {
    //   // 请求拦截器处理
    //   config.data = qs.stringify(config.data);
    // }

    // if (str.split("=")[1]) {
    //   config.url = str.split("=")[0] + "=" + Encrypt(str.split("=")[1]);
    // }

    return config;
});
// response interceptor响应拦截器
var flag = true;
watch: {
    flag: {
        if (!flag) {
            console.log("当");
            Message({
                type: "error",
                message: "请重新登录",
                offset: 200
            });
        }
    }
}
service.interceptors.response.use(
    /**
     * If you want to get http information such as headers or status
     * Please return  response => response
     */

    /**
     * Determine the request status by custom code
     * Here is just an example
     * You can also judge the status by HTTP Status Code
     */

    response => {
        const res = response.data;
        // console.log(res,'111')
        if (res.status == 200) {
            if (res.data) {
                flag = true
                if (res.p) {
                    // res.data = JSON.parse(Decrypt(res.data));
                    return res;
                } else {
                    // console.log( JSON.parse(Decrypt(res.data)))
                    // return JSON.parse(Decrypt(res.data));
                    return res;
                }
            } else {
                return res;
            }
        } else if (res.status == 300) {
            return res;
        } else {
            console.log(res, "111");
            if (res.status == 401) {
                localStorage.setItem("zhtoken", "");
                store.dispatch("user/resetToken");
                console.log("退出登录");
                location.href = "/#/login";
                flag = false;
                console.log("将flag变为false");
            }

            // Message.error(res.msg);
            return "";
        }


    },
    error => {
        console.log("err" + error); // for debug
        Message({
            type: "error",
            message: res.msg,
            offset: 200
        });
        return Promise.reject(error);
    },


);
setTimeout(() => {
    if (flag) {
        console.log(true);
    } else {
        console.log(false);
        Message({
            type: "error",
            message: "请重新登录",
            offset: 200
        });
        flag = true
    }
}, 2000)

export default service;

代码分析先定义一个值如果失败之后改变值得状态然后进行提示至于为什么在setTimeout延时里就只提示一次我也不知道希望有大佬评论一下大家一起学习
其实我本来是想用计算属性得但是没有成功

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值