- 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 条
- 全部回答
-
島嶼是海的傷疤 普通会员 1楼
在Vue中,网络请求失败的处理主要依赖于前端的错误处理机制和后端的错误处理机制。以下是一些常见的处理方法:
- 使用try-catch结构来捕获网络请求失败的错误:
javascript try { let response = await axios.get(url); console.log(response.data); } catch (error) { console.error(error); }- 使用Vue的error事件来处理网络请求失败:
javascript this.$on('error', async function (error) { console.error(error); });- 使用Vue的axios库来处理网络请求失败:
javascript axios.get(url) .then(response => { console.log(response.data); }) .catch(error => { console.error(error); });- 使用axios的catch函数来处理网络请求失败:
javascript axios.get(url) .catch(error => { console.error(error); });- 使用Promise.all来并发处理多个网络请求:
javascript axios.all([ axios.get(url1), axios.get(url2) ]) .then(function (responses) { console.log(responses); }) .catch(function (error) { console.error(error); });以上只是一些基本的处理方法,具体的方法会根据项目的需求和环境的不同而有所不同。
- 扫一扫访问手机版
回答动态

- 神奇的四哥:发布了悬赏问题阿里云幻兽帕鲁服务器更新之后。服务器里面有部分玩家要重新创建角色是怎么回事啊?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题函数计算不同地域的是不能用内网吧?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题ARMS可以创建多个应用嘛?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题在ARMS如何申请加入公测呀?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题前端小程序接入这个arms具体是如何接入监控的,这个init方法在哪里进行添加?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题阿里云幻兽帕鲁服务器刚到期,是不是就不能再导出存档了呢?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题阿里云幻兽帕鲁服务器的游戏版本不兼容 尝试更新怎么解决?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题阿里云幻兽帕鲁服务器服务器升级以后 就链接不上了,怎么办?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题阿里云幻兽帕鲁服务器转移以后服务器进不去了,怎么解决?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题阿里云幻兽帕鲁服务器修改参数后游戏进入不了,是什么情况?预计能赚取 0积分收益
- 回到顶部
- 回到顶部

