老师我的数据获取不成功

product：index.vue

<template>
<div class="product">
<header class="g-header-container">
<product-header/>
</header>

<me-scroll>
<product-slider/>

</me-scroll>
</div>
</template>

<script>
import MeScroll from 'base/scroll';
import ProductHeader from './header';
import ProductSlider from './slider';

import {getProduct} from 'api/product';

export default {
name: 'home-product',
components:{
MeScroll,
ProductHeader,
ProductSlider
},
data(){
return {

}
},
created() {
console.log(this.$route.params.id);

getProduct(this.$route.params.id).then(data => {
console.log(data);
});
}
};
</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.js:

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

//获取搜索结果数据---jsonp
export const getProduct = 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'
};

return jsonp(url, params, jsonpOptions).then(res => {
if (res.data) {
return res.data;
}
throw new Error('没有成功获取到数据！');
}).catch(err => {
if(err) {
// 有错误打印出来不处理
console.log(err);
}
}).then(res => {
// 延时一秒
return new Promise(resolve => {
setTimeout(() => {
resolve(res);
},1000);
});
});
};

断网的时候，可以看到获取是有的

https://unszacs.m.taobao.com/h5/mtop.taobao.detail.getdetail/6.0/?api=mtop.taobao.detail.getdetail&ttid=2017@taobao_h5_6.6.0&data={%22itemNumId%22:%2240651415322%22}&appKey=12574478&dataType=jsonp&type=jsonp&v=6.0&callback=__jp6

有效的应该这样：上边的不能访问，html编码没转化一些字符，如@,{},:

当然本身断网了；下边是修改后可以访问的值

https://unszacs.m.taobao.com/h5/mtop.taobao.detail.getdetail/6.0/?api=mtop.taobao.detail.getdetail&ttid=2017%40taobao_h5_6.6.0&data=%7b%22itemNumId%22%3A%2240651415322%22%7d&appKey=12574478&dataType=jsonp&type=jsonp&v=6.0&callback=__jp5

阿感 2019-06-15

源自：实战：Vue 完成分类、搜索页 3-3 项目作业

收起

6回答

好帮手慕慕子 2019-06-15 16:46:31

同学你好，老师这边测试你的代码，数据是可以正常的访问的。示例；

1、 product下的index。Vue下打印数据

断网之后之后访问时如下状态，断网不能访问网址这是个正常现象呀

2、 slide.vue下打印数据，也是可以成功打印的

同学可以检查一下网络，在测试一下哦

如果帮助到了你，欢迎采纳！

祝学习愉快~~~

收起回答

提问者阿感 #1

en 这样子，可能网络问题，那我设置延迟久点看看

2019-06-15 16:49:03

提问者阿感 2019-06-15 15:53:07

需要的代码块结构；

其它如search.js是在api目录下

收起回答

提问者阿感 2019-06-15 15:51:28

config.js:

export const sliderOptions = { // 轮播图配置
direction: 'horizontal', // horizontal:水平 vertical:垂直
loop: true, // 是否无缝滚动
interval: 0, // 自动播放时间间隔，为0则不自动播放
pagination: true // 是否需要分页器
};

收起回答

提问者阿感 2019-06-15 15:50:36

header:

<template>
<me-navbar class="header">
<i
class="iconfont icon-back"
slot="left"
@click="goBack"
></i>
<h3 class="title" slot="center">商品详情</h3>
<i class="iconfont icon-msg" slot="right"></i>
</me-navbar>
</template>

<script>
import MeNavbar from 'base/navbar';
export default {
name: 'ProductHeader',
components:{
MeNavbar
},
methods:{
goBack(){
this.$router.back();
},
}

};
</script>

<style lang="scss" scoped>
@import "~assets/scss/mixins";

.header {
&.mine-navbar {
background-color: $header-bgc-translucent;
}
.title {
text-align: center;
font-size: 16px;
color: #ffffff;
font-weight: bold;

}
.iconfont {
color: $icon-color-default;
font-size: $icon-font-size;
}
}
</style>

收起回答

提问者阿感 2019-06-15 15:50:06

slider.vue:

<template>
<div class="slider-wrapper">

<me-slider
:data="sliders"
:direaction="direction"
:loop="loop"
:interval="interval"
:pagination="pagination"
>
<swiper-slide
v-for="(item, index) in sliders"
:key="index"
>
<a :href="item.link" class="slider-link">
<img :src="item.picUrl" alt="" class="slider-img">
</a>

</swiper-slide>
</me-slider>
</div>
</template>

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

export default {
name: 'ProductSlider',
components:{
MeSlider,
MeLoading,
swiperSlide
},
data() {
return {
direction: sliderOptions.direction,
loop: sliderOptions.loop,
interval: sliderOptions.interval,
pagination: sliderOptions.pagination,
sliders:[]
};
},
created() {
console.log(this.$route.params.id);
getProduct(this.$route.params.id).then(data => {
console.log('1');
});

// this.getSliders();
},
// methods:{
// update(){
// return this.getSliders();
// },
// getSliders(id) {
// return getProduct(this.$route.params.id).then(data => {
// // this.sliders = data;
// console.log(data);
// });
// }
// }

};
</script>
<style lang="scss" scoped>

.slider-wapper {
width: 100%;
height: 183px;
}

.slider-link {
display: block;
}

.slider-link,
.slider-img {
overflow: hidden;
width: 100%;
height: 100%;
}

</style>