老师 npm了这个,然后用了第二个then 还是报错 给你看截图,代码也先给你
home.js是下面
import axios from 'axios';
import {SUCC_CODE, TIMEOUT} from './config';
// 获取幻灯片数据 -- ajax
export const getHomeSlider = () => {
return axios.get('https://www.imooc.com/api/home/slider', {
timeout: TIMEOUT
}).then(res => {
if (res.data.code === SUCC_CODE) {
return res.data.slider;
}
throw new Error('没有成功获取到数据!');
}).catch(err => {
if (err) {
console.log(err);
}
return [
{
linkUrl: 'https://www.imooc.com',
picUrl: require('assets/img/404.png')
}
];
}).then(data => {
return new Promise(resolve => {
setTimeout(() => {
resolve(data);
}, 1000);
});
});
};
2020-05-15 17:25:04
<template>
<div class="swiper-wrapper">
<me-loading v-if="!sliders.length"></me-loading>
<me-slider :direction="direction" :loop="loop" :interval="interval" :pagination="pagination" v-else>
<swiper-slide v-for="(item, index) in sliders" :key="index">
<a :href="item.linkUrl" 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 {swiperSlide} from 'vue-awesome-swiper';
import {sliderOptions} from './config';
import {getHomeSlider} from 'api/home';
import MeLoading from 'base/loading';
export default {
name: 'HomeSlider',
components: {
MeSlider,
swiperSlide,
MeLoading
},
data() {
return {
direction: sliderOptions.direction,
loop: sliderOptions.loop,
interval: sliderOptions.interval,
pagination: sliderOptions.pagination,
sliders: []
};
},
created() {
this.getSlider();
},
methods: {
getSlider() {
getHomeSlider().then(data => {
this.sliders = data;
});
}
}
};
</script>
<style lang="scss" scoped>
.swiper-wrapper {
height: 183px;
}
.slider-link {
display: block;
}
.slider-link,
.slider-img {
width: 100%;
height: 100%;
}
</style>
这是home下面的slider.vue使用了getHomeSlide方法
2020-05-15 17:27:44
恭喜解决一个难题,获得1积分~
来为老师/同学的回答评分吧
0 星