数据获取失败
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中出了问题,但是我找不出来啊
30
收起
正在回答 回答被采纳积分+1
3回答
4.Vue与React高级框架开发
- 参与学习 人
- 提交作业 239 份
- 解答问题 10739 个
本阶段带你深入前端开发的肌理,通过ES6基础知识和前端主流高级框架的学习,助你快速构建企业级移动webAPP应用,进入职场的终极battle
了解课程
恭喜解决一个难题,获得1积分~
来为老师/同学的回答评分吧
0 星