(共556篇)
全部分类

nuxt的asyncData与fetch行为导致页面假死问题
[ Nuxt ] 

在项目中碰到了这么一个问题:

商品详情页在asyncData中查询数据, 如果是直接打开该页面, 如果接口慢一些的话, 页面会空白一段时间, 浏览器会呈现一个加载中的状态, 但如果是从其他页面跳转到商品详情页, 由于asyncData是在mounted之前执行的, 就导致页面处于一种"假死"状态, 根本看不出来页面跳转, 又看不出来加载中状态, 这就严重影响了用户体验

下面是解决该问题的思路:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
<template>
  <div></div>
</template>
<script>
function fetchData() {
  // 请求数据
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve([1, 2, 3]);
    }, 3000);
  });
}
export default {
  layout: 'empty',
  async asyncData() {
    /**
     * 如果是SSR期间执行的, 就允许查询数据, 如果是客户端跳转页面执行的, 就交给mounted来获取数据
     */
    const data = {
      list: [],
    };
    if (process.server) {
      data.list = await fetchData();
    } else {
      data.turnover = true;
    }
    return data;
  },
  async mounted() {
    this.turnover && (this.list = await this.fetchData());
    console.log('page mounted', this.list);
  },
  methods: {
    fetchData() {
      // 记得显示loading
      this.list = fetchData();
    },
  },
};
</script>