对axios中定时回调的疑惑

对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);

    });

  });

};

  1. 在return  axios的第一个.then就已经对获取的数据对sliders进行赋值了,此时sliders中的图片就会进行渲染,然后在下面的.then中设定了一个异步调用的时间周期函数,同样传入获取的data数据,需要实现延迟一秒进行加载的效果,那之前都已经实现了数据的获取,在这之后再进行settimeout的设定有什么用呢?

  2. 在下面的then中return一个promise包裹的settimeout,这里不是很明白视频老师讲的意思,避免写回调的麻烦,这段代码的意图是在settimeout中过一秒使用reslove执行获取的数据。但就实现效果来看,只能是这里把data传给上面第一个then中调用的reslove方法。那么问题来了,第一个then是先执行的,在这里不传这个数据上面就获取不到吗?那为什么不直接在第一个then中就直接使用settimeout进行包裹?

  3. 请问最后一个then中的函数是怎么实现将data数据设置在1秒后进行获取,然后在获取的时候调用第一个then中的reslove方法对data进行处理的呢?


正在回答 回答被采纳积分+1

登陆购买课程后可参与讨论,去登陆

3回答
好帮手慕糖 2019-12-27 09:50:43

同学你好,不确定同学要问的是为什么要设置下面的延时效果,还是下面的then会执行,下面分别作出回答。

1、第一次回答的时候有说过哦,老师这里只是为了展示有这个效果。模拟服务器的请求时间,这里是假设1000之后请求到。若是真实情况,就是我们像服务器请求的这个时间。所以实现的时候,直接不使用这个计时器就可以了。

2、then是链式调用的,下面的then依然会接着执行,且会将第一个then的返回值作为参数。

祝学习愉快~

好帮手慕糖 2019-12-26 19:14:12

同学你好,这里最后写一个then也是为了测试这个延时效果。当然写在第一个then中也是可以的。但是一般情况下我们是不需要这个延时的。可以不写的,所以单独将这块写出来了。

祝学习愉快~

  • 提问者 慕用0863198 #1
    那为什么有了第一个then还会出现下面那个then.的延时效果呢
    2019-12-26 19:34:57
好帮手慕糖 2019-12-26 18:10:36

同学你好,关于你的问题,回答如下:

1、这里计时器,是为了模拟服务器的请求时间,这里是假设1000之后请求到。若是真实情况,就是我们像服务器请求的这个时间。所以实现的时候,直接不使用这个计时器就可以了。

2、“只能是这里把data传给上面第一个then中调用的reslove方法。”这个说法是错误的,不会往前传递的,链式调用是从上往下执行的。

在第一个then是获取数据,但是咋catch中会判断获取数据。最终在最后一个then中返回。

3、then是链式调用,上一个then的返回值是下一个then的参数,所以这里参数得到的数据。然后1s后执行了resolve这个方法。这里计时器就是一个延时作用,模拟请求的时间的。

如果我的回答帮助了你,欢迎采纳,祝学习愉快~

  • 提问者 慕用0863198 #1
    。。。那有第一个then在的时候就已经对res进行处理了,那后面的then模拟服务器延时岂不是没有意义,这里原来的意思是不是应该把后面定时的then放到第一个then的位置模拟服务器延时的效果?
    2019-12-26 18:17:51
问题已解决,确定采纳
还有疑问,暂不采纳

恭喜解决一个难题,获得1积分~

来为老师/同学的回答评分吧

0 星
热门框架Vue开发WebApp 18版
  • 参与学习           人
  • 提交作业       209    份
  • 解答问题       3299    个

本路径是通过ES6基础知识、运用Zepto、Swiper、fullPag等移动端常用工具包、以及当下流行框架Vue,结合多个实战案例,还原真实开发场景,最终实现手机端购物商城网页开发。

了解课程
请稍等 ...
意见反馈 帮助中心 APP下载
官方微信

在线咨询

领取优惠

免费试听

领取大纲

扫描二维码,添加
你的专属老师