账号密码登录
微信安全登录
微信扫描二维码登录

登录后绑定QQ、微信即可实现信息互通

手机验证码登录
找回密码返回
邮箱找回 手机找回
注册账号返回
其他登录方式
分享
  • 收藏
    X
    vue中网络请求失败的处置问题?
    27
    0

    场景需求:

    前端向后台首次请求数据失败后再次请求数据4次,过程中前台显示转圈(等待),第四次依然失败,转圈消失,直接显示:“请求失败,请检查网络设置”。
    

    有关系的几个文件:
    /components/findlist.vue; /store/modules/find.js; /fetch/api.js
    find.js会调用api.js

    问题描述:
    因为各个场景都要用到,所以集中处理这个需求,就想到在/fetch/api.js的

    axios.defaults.retry = 4;
    axios.defaults.retryDelay = 1000;
    let loading=0;
    axios.interceptors.response.use(undefined, function axiosRetryInterceptor(err) {
        var config = err.config;
        if(!config || !config.retry) return Promise.reject(err);
        config.__retryCount = config.__retryCount || 0;
        if(config.__retryCount >= config.retry) {
           loading=1;
           return Promise.reject(err);
        }
        config.__retryCount += 1;
        
        var backoff = new Promise(function(resolve) {
            setTimeout(function() {
                resolve();
            }, config.retryDelay || 1);
        });
        return backoff.then(function() {
            return axios(config);
        });
    });
    
    向后台请求也写在这个文件里。
    
    

    我设置了一个标识loading,一旦超过四次,就变成1,但是当这个loading变成1,就传不到/store/modules/find.js中去,更传不到/components/findlist.vue中所以无法实现效果。

    ps:在api.js的export default{loading},只有调用的时候变量loading才出得去,后来在截获函数里的赋值,就出不去了。

    0
    打赏
    收藏
    点击回答
        全部回答
    • 0
    • 島嶼是海的傷疤 普通会员 1楼

      在Vue中,网络请求失败的处理主要依赖于前端的错误处理机制和后端的错误处理机制。以下是一些常见的处理方法:

      1. 使用try-catch结构来捕获网络请求失败的错误:

      javascript try { let response = await axios.get(url); console.log(response.data); } catch (error) { console.error(error); }

      1. 使用Vue的error事件来处理网络请求失败:

      javascript this.$on('error', async function (error) { console.error(error); });

      1. 使用Vue的axios库来处理网络请求失败:

      javascript axios.get(url) .then(response => { console.log(response.data); }) .catch(error => { console.error(error); });

      1. 使用axios的catch函数来处理网络请求失败:

      javascript axios.get(url) .catch(error => { console.error(error); });

      1. 使用Promise.all来并发处理多个网络请求:

      javascript axios.all([ axios.get(url1), axios.get(url2) ]) .then(function (responses) { console.log(responses); }) .catch(function (error) { console.error(error); });

      以上只是一些基本的处理方法,具体的方法会根据项目的需求和环境的不同而有所不同。

    更多回答
    扫一扫访问手机版
    • 回到顶部
    • 回到顶部