vue3.0页面显示空白的问题处理（在setup里面使用async/await的问题

玖柒的小窝

修改于 2021-11-08 14:01:13

5.7K0

修改于 2021-11-08 14:01:13

vue3.0在半年前，就有利用平台尝试过一波。为什么优先考虑平台尝试，主要原因是因为使用ant的api，已有的api使用代码对于页面规范以及代码规范起到一个模板作用，而且具有一定的参考价值。以便于更好的入门。当时vite也是一个大热门，于是就一起照猫画虎的都用上了。后来果然还是半路夭折了，原因很简单，当时vue3.0还属于在社区范畴，遇到的一些问题在网上找不到对应的解决方法，才疏学浅，无法知晓原因（其中记得有一个报错注释了源码才清掉），加上当时自己的业务组遇上很多需求，于是搁浅了很久。

前言：

于是，现在操手重新试一下，不过之前得平台还是在试手的时候不够灵活。想想现在已经慢慢开始普及vue3.0，平常有自己封装自己使用H5模板的习惯，开发项目的时候直接套用，合心应手。于是这次就开始封装自己常用的H5-vue3.0模版。

fine。言归正传，现在回到开头我们看到的这个问题。 =>vue3.0页面显示空白的问题处理:

此时的代码背景有：

路由
接口请求
vite编译

看一下主页代码home.vue：

<template>
    <div>
        1234679
        {{ res }}
    </div>
</template>
复制代码

测试接口请求代码：

import { defineComponent } from "vue";
import homeApi from "../api/index.js";

export default defineComponent({
    async setup() {
        const params = {
            id: "2313a6b2a89d4b11a1d16dee2047663a",
        };
        const res = await homeApi.testApi(params.id);
        console.log(res);
        return {
            res
        };
    },
});

复制代码

fine。此时页面上无任何信息，是一个空白页。但是接口请求是可以的。

来找一下原因：

1.首先查看路由，跳转的是正确的页面，说明不是路由的问题。

2.把js代码注释：页面上出现 123456789 ，及说明页面渲染没问题，那就是接口的问题了。

但是接口此时已经打印出了内容，但是没有渲染问题。说明是接口请求的时机不对。接口是使用了 async/await 来请求接口的，说明在异步的时候与渲染的函数时机不对。查看一下最新的3.0文档,里面的有一个介绍 suspense 的使用介绍

第一种解决方法:使用suspense 包裹你的组件

果然还是使用时机的问题：大多数组合式 API 函数只会在第一个 await 之前工作，它隐性地包裹在一个 Promise 内，因为我们此时所用的函数是async的，所以这其实也是在说明笼统的使用这个方法是不好的

处理方法：使用suspense 包裹你的组件

在app.vue里

<div>
    <suspense>
        <router-view></router-view>
    </suspense> 
 </div>
复制代码

使用vite，页面刷新很快，页面出现内容：

渲染也可以，说明渲染成功。

第二种解决方法：函数式处理

其实，现在我们想了想，上面会出这种渲染错误的原因，主要是：大多数组合式 API 函数只会在第一个 await 之前工作。那我们如果直接使用函数处理其实不也是可以直接解决。

<script>
import { defineComponent, toRefs, reactive } from "vue";
import homeApi from "../api/index.js";

export default defineComponent({
    setup() {
        let testData = reactive({
            res: {},
        });
        const params = {
            id: "2313a6b2a89d4b11a1d16dee2047663a",
        };
        const getTestData = async () => {
            const res = await homeApi.testApi(params.id);
            testData.res = res;
            console.log(testData);
        };
        getTestData();
        return {
            ...toRefs(testData),
        };
    },
});
</script>
复制代码

页面出现内容，正常。

此时想到之前在社区里面看到的现在的有关于vue3.0的语法糖，刚好可以测试一下。

第三种解决方法：结合第二种使用vue3.0语法糖

<script setup>
import { ref } from "vue";
import homeApi from "../api/index.js";

let testData = ref({});

const params = {
    id: "2313a6b2a89d4b11a1d16dee2047663a",
};

const getTestData = async () => {
    const res = await homeApi.testApi(params.id);
    testData.value = res;
};

getTestData();
</script>
复制代码

页面正常。

本文系转载，前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

渲染