数据获取失败
来源:3-3 项目作业
Edward666
2020-04-01 18:57:15
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中出了问题,但是我找不出来啊
3回答
好帮手慕言
2020-04-01
同学你好,是判断条件出现了问题,在数据中没有code字段,不过数据中有ret字段,如下:
product.js可以做下方修改:
如果我的回答帮到了你,欢迎采纳,祝学习愉快~
好帮手慕言
2020-04-02
同学你好,根据第一次提供的代码修改后,这边测试是可以获取到数据的。同学可以把修改后的代码和控制台打印的内容粘贴上来,老师再帮助测试。祝学习愉快~
好帮手慕言
2020-04-02
同学你好,判断数据有没有请求回来,判断条件要和请求回来的数据吻合,比如:有时是code码为200,有时是其他的值,在实际工作中,这些都是和后端商议好的。
使用同学提供的代码,修改判断条件之后,这边测试是可以获取到数据的,同学可以清除浏览器的缓存再测试下。
祝学习愉快~
相似问题