数据获取失败
来源: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,有时是其他的值,在实际工作中,这些都是和后端商议好的。
使用同学提供的代码,修改判断条件之后,这边测试是可以获取到数据的,同学可以清除浏览器的缓存再测试下。
祝学习愉快~
相似问题