对axios中定时回调的疑惑
axios.get('http://www.imooc.com/api/home/slider', {
timeout: TIMEOUT
}).then(res => {
if (res.data.code === SUCC_CODE) {
let sliders = res.data.slider;
const slider = [sliders[Math.floor(Math.random() * sliders.length)]];
sliders = shuffle(sliders.filter(() => Math.random() >= 0.5));
if (sliders.length === 0) {
sliders = slider;
}
return sliders;
}
throw new Error('没有成功获取到数据!');
}).catch(err => {
if (err) {
console.log(err);
}
return [
{
linkUrl: 'https://www.imooc.com',
picUrl: require('assets/img/404.png')
}
];
}).then(res => {
return new Promise(resolve => {
setTimeout(() => {
resolve(res);
}, 1000);
});
});
};
在return axios的第一个.then就已经对获取的数据对sliders进行赋值了,此时sliders中的图片就会进行渲染,然后在下面的.then中设定了一个异步调用的时间周期函数,同样传入获取的data数据,需要实现延迟一秒进行加载的效果,那之前都已经实现了数据的获取,在这之后再进行settimeout的设定有什么用呢?
在下面的then中return一个promise包裹的settimeout,这里不是很明白视频老师讲的意思,避免写回调的麻烦,这段代码的意图是在settimeout中过一秒使用reslove执行获取的数据。但就实现效果来看,只能是这里把data传给上面第一个then中调用的reslove方法。那么问题来了,第一个then是先执行的,在这里不传这个数据上面就获取不到吗?那为什么不直接在第一个then中就直接使用settimeout进行包裹?
请问最后一个then中的函数是怎么实现将data数据设置在1秒后进行获取,然后在获取的时候调用第一个then中的reslove方法对data进行处理的呢?
正在回答 回答被采纳积分+1
同学你好,关于你的问题,回答如下:
1、这里计时器,是为了模拟服务器的请求时间,这里是假设1000之后请求到。若是真实情况,就是我们像服务器请求的这个时间。所以实现的时候,直接不使用这个计时器就可以了。
2、“只能是这里把data传给上面第一个then中调用的reslove方法。”这个说法是错误的,不会往前传递的,链式调用是从上往下执行的。
在第一个then是获取数据,但是咋catch中会判断获取数据。最终在最后一个then中返回。
3、then是链式调用,上一个then的返回值是下一个then的参数,所以这里参数得到的数据。然后1s后执行了resolve这个方法。这里计时器就是一个延时作用,模拟请求的时间的。
如果我的回答帮助了你,欢迎采纳,祝学习愉快~
- 参与学习 人
- 提交作业 209 份
- 解答问题 3299 个
本路径是通过ES6基础知识、运用Zepto、Swiper、fullPag等移动端常用工具包、以及当下流行框架Vue,结合多个实战案例,还原真实开发场景,最终实现手机端购物商城网页开发。
了解课程
恭喜解决一个难题,获得1积分~
来为老师/同学的回答评分吧
0 星