vue3.0之異步組件Suspense (包括瀏覽器異步調試)

userLog.vue （父組件）

 

 

 

 

 

上面的意思為，

default里面是異步渲染成功之后顯示的視圖組件

fallback里面是類似於正在請求中，則會顯示這種

 

 

cont2.vue (子組件)

<template>
  <div>
    <ul>
      <li v-for="item in data.tableData" :key="item.name">{{ item.name }} - {{ item.ip }}</li>
    </ul>
  </div>
</template>

<script setup>
import SourceMirror from "@/components/resource/dutyMirror";

import {
  defineComponent,
  defineAsyncComponent,
  ref,
  reactive,
  onMounted,
  toRefs,
  markRaw,
  shallowRef,
  getCurrentInstance
} from "vue";
const data = reactive({
  search: "",
  currentPage1: 1,
  tableData: [],
  rows: 10,
  page: 1,
  total: 100
});

function inc() {
  const parmas = {
    page: data.page,
    rows: data.rows,
    search: data.search
  };
  return new Promise(resolve => {
    SourceMirror.queryLogs(parmas).then(res => {
      console.log("cont2", res);
      if (res.data.code === 200) {
        resolve(res.data.data);
      } else {
      }
    });
  });
}

let list = await inc();
data.total = list.total;
data.tableData = list.list;
</script>

 

其中

<script setup>為語法糖
這樣里面就不需要return了

重點:必須在異步組件里面的值是

new Promise的返回狀態

 

 

瀏覽器異步調試-網絡速度

 

 

 

 點擊slow 3G，所有的請求速度就會變慢