出现400后然后再请求成功？

出现了400状态码导致我的swiper出现问题

------------------------------------------------------------------

// product.js

import jsonp from 'assets/js/jsonp';
import {jsonpOptions} from './config';

// 获取搜索结果数据--jsonp
export const getProductDetail = (id) => {
 const url = 'https://unszacs.m.taobao.com/h5/mtop.taobao.detail.getdetail/6.0/';
 const params = {
   api: 'mtop.taobao.detail.getdetail',
   ttid: '2017%40taobao_h5_6.6.0',
   data: `%7B"itemNumId"%3A"${id}"%7D`,
   appkey: 12574478,
   dataType: 'jsonp',
   type: 'jsonp',
   v: '6.0'
 };

 // jsonp代表调用开头引入封装好的jsonp.js,指向的是jsonp.js中暴露的方法export default (url, data, options),返回的是Promise对象
 return jsonp(url, params, jsonpOptions).then(res => {
   if (res.data) {
     return res.data;
   }
   throw new Error('没有获取到数据!');
 }).catch(err => {
   console.log(err);
 }).then(res => { // res接收返回来的数据
   return new Promise(resolve => {
     setTimeout(() => {
       resolve(res); // 1s后将请求回来的数据发送出去
     }, 1000);
   });
 });
};

-------------------------------------------------------------
//index.vue
<template>
  <transition name="product">
    <!--首页recommend点击跳转到商品详情页，已经离开根节点（可以理解为根目录），所以没有动画效果。使用v-if条件渲染即使不是根节点都可以使用transition过渡效果，在挂着组件的mounted生命周期里改变isShow的值-->
    <div class="product" v-if="isShow">
      <header class="g-header-container">
        <product-header @go-back="goBack"></product-header>
        <product-slider :details="details"></product-slider>
        <product-detail></product-detail>
      </header>
      <div class="g-content-container"></div>
      <div class="product-tabbar-container"></div>
    </div>
  </transition>
</template>

<script>
  import ProductHeader from './header';
  import ProductSlider from './slider';
  import ProductDetail from './detail';
  import {getProductDetail} from 'api/product.js';
  export default {
    name: 'product',
    components: {
      ProductHeader,
      ProductSlider,
      ProductDetail
    },
    data() {
      return {
        isShow: false,
        details: {}
      };
    },
    created() {
      this.getProductData();
    },
    methods: {
      goBack() {
        this.$router.back();
      },
      getProductData() {
        return getProductDetail(this.$route.params.id).then(data => {
          // 如果请求不成功，data接收的是undefined
          if (data) {
            // 赋给details传递给子组件
            this.details = data;
          }
        });
      }
    },
    mounted() {
      this.isShow = true;
    }
  };
</script>

<style lang="scss" scoped>
  // 因为vue创建的是单页面应用，所以想要点击商品后显示商品详情页的页面显示需要设置层级z-index
  @import "~assets/scss/mixins";

  .product{
    overflow: hidden;
    position: absolute;
    top: 0;
    left: 0;
    z-index: $product-z-index;
    width: 100%;
    height: 100%;
    background-color: white;
  }
  // 在Vue 提供了 transition 的封装组件中，只有4种情况可以给元素和组件添加进入/离开过渡
  //1.条件渲染 (使用 v-if)
  //2.条件展示 (使用 v-show)
  //3.动态组件
  //4.组件根节点
  // 用transition包裹product页面起到过渡效果
  .product-enter-active,
  .product-leave-active{
    transition: all 0.5s;
  }

  .product-enter,
  .product-leave-to{
    transform: translate3d(100%, 0, 0);
  }
</style>

-----------------------------------------------------
//slider/vue
<template>
  <div class="slider-wrapper">
    <me-loading v-if="data.length===0"></me-loading>
    <me-slider :direction="direction" :loop="loop" :interval="interval" :pagination="pagination" v-else>
      <swiper-slide v-for="(item, index) in data" :key="index">
        <img :src="item" alt="" class="slider-img">
      </swiper-slide>
    </me-slider>
  </div>
</template>

<script>
  import {swiperSlide} from 'vue-awesome-swiper';
  import {swiperOptions} from './config';
  import MeSlider from 'base/slider';
  import MeLoading from 'base/loading';

  export default {
    name: 'ProductSlider',
    components: {
      MeSlider,
      MeLoading,
      swiperSlide
    },
    data() {
      return {
        direction: swiperOptions.direction,
        loop: swiperOptions.loop,
        interval: swiperOptions.interval,
        pagination: swiperOptions.pagination,
        data: []
      };
    },
    props: {
      details: {
        type: Object,
        default() {
          return {};
        }
      }
    },
    methods: {
      getProduct() {
        // 请求数据是异步的， 与子组件渲染的过程中有一个时间差的问题，所以直接在子组件的mounted中访问不到,需要延时
        setTimeout(() => {
          console.log('detail', this.details);
          this.data = this.details.item.images;
        }, 2000);
      }
    },
    beforeMount() {
      this.getProduct();
    },
    watch: {
      details(val) {
        this.data = val;
      }
    }
  };
</script>

<style lang="scss" scoped>
  @import "~assets/scss/mixins";
  .slider-wrapper{
    height: 283px;
  }

  .slider-img{
    width: 100%;
    height: 100%;
  }
</style>