vue请求数据报错

Question

在created()的时候做数据请求：

created() {
    this.getBanner()
    this.getHotRecommended()
    this.getNewAlbum(this.newAlbum.limit, this.newAlbum.offset)
    this.getToplist()
},
methods: {
    // 获取banner数据
    getBanner() {
        banner().then((res) => {
            this.bannerList = res.data.banners
        })
    },
    // 热门推荐
    getHotRecommended() {
        hotRecommended().then((res) => {
            this.hotRecommendedList = res.data.result
        })
    },
    // 获取新碟上架
    getNewAlbum(limit, offset) {
        newAlbum(limit, offset).then((res) => {
            this.newAlbum.data = res.data.albums
        })
    },
    // 榜单
    getToplist() {
        // 飙升榜
        toplist(3).then((res) => {
            this.biaosheng = res.data.result
        })
        // 新歌榜
        toplist(0).then((res) => {
            this.xinge = res.data.result
        })
        // 原创榜
        toplist(2).then((res) => {
            this.yuanchuang = res.data.result
        })
    }
}

在开始进入页面的时候报错，提示某个数据还没有：

[Vue warn]: Error in render function: "TypeError: Cannot read property 'coverImgUrl' of null"

但是页面加载完成后数据又正确加载了。

请问这是什么原因造成的，是请求数据的时机不对吗？

Answer 1

检查你的render函数，上面爆出来的是render function内的报错，跟你目前的执行的代码关系应该不大。

建议在访问对象属性时，做一下空值判断。如state && state.a && state.a.b

Answer 2

你将函数放在this.nextTick(function(){

 this.getBanner()
this.getHotRecommended()
this.getNewAlbum(this.newAlbum.limit, this.newAlbum.offset)
this.getToplist()

})

Answer 3

应该是异步请求延迟造成的，你的页面在解析数据时，异步请求的结果还没返回回来，建议在页面解析数据时做一下数据是否为空的判断就能解决

Answer 4

@你只配娱乐

// index.vue
<div class="n-bilst">
    <toplist :toplist="biaosheng"></toplist>
    <toplist :toplist="xinge"></toplist>
    <toplist :toplist="yuanchuang"></toplist>
</div>

data(){
    return {
        biaosheng: null,
        xinge: null,
        yuanchuang: null
    }
}

<toplist/>组件的数据是通过组件内的props绑定的

// Toplist.vue
<img class="j-img" :src="toplist.coverImgUrl">

props: {
    toplist: {
        type: Object
    }
}

你说得判断下值为空，是要在组件内判断了？

Answer 5

在组件中判断toplist.coverImgUrl存在不，不存在就不渲染，<img v-if="isFolder" class="j-img" :src="toplist.coverImgUrl">可以通过计算属性来观察是不是存在。

computed: {
        isFolder: function () {
            return this.toplist && this.toplist.coverImgUrl
        }
    }

Answer 6

出现问题的原因大致这样：

1. 在created钩子中开始请求数据，请求在pending中

2. 这时候vue继续执行后续操作，到了渲染一层的时候，dom结构中所以赖的字段还没初始化好，所以抛出错误

3. 后面发出的请求回来了，vue响应式机制自然而然的就会再次渲染出正确的结果。

处理这种错误大致可分为两种：

1. 在data中对所有数据结构进行默认的声明初始化

2. 在dom树依赖的地方进行空值判断