数据获取失败

数据获取失败

product.js
import jsonp from 'assets/js/jsonp';//引入的是assets/js/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@taobao_h5_6.6.0',
    data:`{"itemNumId":"${id}"}`,
    appkey:12574478,
    dataType:'jsonp',
    type:'jsonp',
    v:'6.0'
  }
  //jsonp请求的一些配置
  const options = {param: 'callback', timeout: 10000};
  //jsonp参数url要跨域的链接,params要拼接到链接上的参数,optionsjsonp请求配置比如请求多久超时等
  return jsonp(url, params, options).then(res => {
    if(res.code === '200'){
      console.log('商品详情数据请求成功!');
      return res;
    }
    throw new Error('商品详情数据请求失败');
  }).catch((err) => {
    if(err){
      console.log(err);
    }
  }).then(data => {//延时1s获取数据
    return new Promise(resolve => {
      setTimeout(() => {
        resolve(data);
      }, 1000);
    });
  })
}

product/index.js

<template>
    <div class="product">
        <header class="g-header-container">
            <product-header/>
        </header>
        <me-scroll>
            <product-slider :productId="productId"></product-slider>
        </me-scroll>
    </div>
</template>
<script>
import productHeader from './header';
import productSlider from './slider';
import MeScroll from 'base/scroll';
export default {
    name: 'Product',
    components: {
        productHeader,
        productSlider,
        MeScroll
    },
    data() {
        return {
            productId: this.$route.params.id
        }
    },
    mounted() {
        console.log('接收商品id成功:'+this.$route.params.id);
    }
}
</script>
<style lang="scss" scoped>
@import '~assets/scss/mixins';
    .product {
        overflow: hidden;
        position: absolute;
        top:0;
        left: 0;
        z-index: $product-z-index;
        width: 100%;
        height: 100%;
        background-color: $bgc-theme;
    }
</style>

product/slider.js

<template>
  <div class="slider-wrapper">
    <MeLoading v-if="sliders.length"></MeLoading>
    <me-slider :direction="direction" :loop="loop" :interval="interval" :pagination="pagination" :data="sliders" v-else>
        <swiper-slide v-for="(item,index) in sliders" v-bind:key="index">
            <a :href="item.linkUrl" class="slider-link">
                <img :src="item.picUrl" class="slider-img">
            </a>
        </swiper-slide>
    </me-slider>
  </div>
</template>

<script>
import MeSlider from 'base/slider';
import MeLoading from 'base/loading';
import { swiper,swiperSlider } from "vue-awesome-swiper";
import { getProductDetail } from "api/product.js";

export default {
  name:'productSlider',
  components: {
    MeSlider,
    MeLoading,
    swiper,
    swiperSlider
  },
  data() {
    return {
      direction: 'horizontal',
      loop: true,
      interval: 0,
      pagination: true,
      sliders: []
    }
  },
  props: {
    productId: {
      type: String,
      default:''
    }
  },
  created() {
    console.log('幻灯片组件接收商品ID成功');
    this.getDetail(this.productId);
  },
  methods: {
    getDetail(id) {
      return getProductDetail(id).then(data => {
        console.log(data);
        // this.sliders = data;
      })
    }
  }
}
</script>

<style lang="scss" scoped>

</style>

可以确定是product.js中出了问题,但是我找不出来啊

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

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

3回答
好帮手慕言 2020-04-02 14:43:14

同学你好,根据第一次提供的代码修改后,这边测试是可以获取到数据的。同学可以把修改后的代码和控制台打印的内容粘贴上来,老师再帮助测试。祝学习愉快~

  • 提问者 Edward666 #1
    我获取到了,好像是要给jsonp.js文件中需要拼接的值添加一个encodeURIComponent函数。老师请帮我回答一下另外一个问题好吗。有关于子组件与子组件之间的传值的问题。我已经提问了,在另外一个帖子
    2020-04-02 14:46:52
好帮手慕言 2020-04-02 10:56:10

同学你好,判断数据有没有请求回来,判断条件要和请求回来的数据吻合,比如:有时是code码为200,有时是其他的值,在实际工作中,这些都是和后端商议好的。

使用同学提供的代码,修改判断条件之后,这边测试是可以获取到数据的,同学可以清除浏览器的缓存再测试下。

祝学习愉快~

  • 提问者 Edward666 #1
    还是请求失败
    2020-04-02 12:16:48
好帮手慕言 2020-04-01 19:36:32

同学你好,是判断条件出现了问题,在数据中没有code字段,不过数据中有ret字段,如下:
http://img1.sycdn.imooc.com//climg/5e847c7809cd715404300176.jpg

product.js可以做下方修改:
http://img1.sycdn.imooc.com//climg/5e847cb509e50f6406170070.jpg

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

  • 提问者 Edward666 #1
    好像每一个页面的jsonp的判断都不同是吗?
    2020-04-01 19:43:59
  • 提问者 Edward666 #2
    我还是获取失败了,res都获取不到。真不知道是哪里出错了
    2020-04-01 19:56:02
问题已解决,确定采纳
还有疑问,暂不采纳

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

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

0 星
请稍等 ...
意见反馈 帮助中心 APP下载
官方微信

在线咨询

领取优惠

免费试听

领取大纲

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