数据获取失败
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 星