快捷導(dǎo)航

vue3之Suspense加載異步數(shù)據(jù)的使用

更新時(shí)間：2023年02月05日 15:52:58 作者：小渣亮

本文主要介紹了vue3之Suspense加載異步數(shù)據(jù)的使用，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧

Suspense使用

<template>
  <Suspense>
    <template #default>
      <ProductList></ProductList>
    </template>
    <template #fallback> <div>loading...</div> </template>
  </Suspense>
</template>

<script setup lang="ts" name="Cart">
import ProductList from "./ProductList.vue";
</script>
<style lang="scss" scoped></style>

組件

使用 flag 與 Promise 來模擬異步加載數(shù)據(jù)，渲染成功與失敗的頁面效果

<!-- -->
<template>
  <div v-if="data">
    ProductList
    <div>data父 - {{ data }}</div>
  </div>
  <div v-if="err">
    {{ err }}
  </div>
</template>

<script setup lang="ts" name="ProductList">
import { ref } from "vue";

const data = ref<any>(null);
const flag = false;
const err = ref(null);
function aaa() {
  return new Promise((resolve) => {
    setTimeout(() => {
      if (!flag) {
        return resolve({ code: 0, errorMsg: "參數(shù)錯(cuò)誤" });
      }
      return resolve({
        code: 200,
        data: {
          result: 42,
        },
      });
    }, 3000);
  });
}
const res = await aaa();
console.log(res);

if (res.code === 200) {
  data.value = res.data.result;
} else {
  data.value = "";
  err.value = res.errorMsg;
}
</script>
<style lang="scss" scoped></style>

效果

調(diào)用請(qǐng)求的 loading效果

在這里插入圖片描述

請(qǐng)求返回?cái)?shù)據(jù)時(shí)候

在這里插入圖片描述

請(qǐng)求返回錯(cuò)誤時(shí)候

在這里插入圖片描述

到此這篇關(guān)于vue3之Suspense加載異步數(shù)據(jù)的使用的文章就介紹到這了,更多相關(guān)vue3 Suspense加載異步內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

相關(guān)文章

vue以組件或者插件的形式實(shí)現(xiàn)throttle或者debounce
這篇文章主要介紹了vue以組件或者插件的形式實(shí)現(xiàn)throttle或者debounce，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2019-05-05
Vue實(shí)現(xiàn)選擇城市功能
這篇文章主要介紹了Vue實(shí)現(xiàn)選擇城市功能,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下
2017-05-05
Vue前端vue.config.js簡(jiǎn)介
vue.config.js?是一個(gè)可選的配置文件，如果項(xiàng)目的?(和?package.json?同級(jí)的)?根目錄中存在這個(gè)文件，那么它會(huì)被?@vue/cli-service?自動(dòng)加載，本文重點(diǎn)介紹VUE前端vue.config.js簡(jiǎn)介，感興趣的朋友跟隨小編一起看看吧
2023-01-01
vue-cli3使用mock數(shù)據(jù)的方法分析
這篇文章主要介紹了vue-cli3使用mock數(shù)據(jù)的方法,結(jié)合實(shí)例形式分析了vue-cli3使用mock數(shù)據(jù)的相關(guān)實(shí)現(xiàn)方法與操作注意事項(xiàng),需要的朋友可以參考下
2020-03-03
vue-cli或vue項(xiàng)目利用HBuilder打包成移動(dòng)端app操作
這篇文章主要介紹了vue-cli或vue項(xiàng)目利用HBuilder打包成移動(dòng)端app操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧
2020-07-07
vue實(shí)現(xiàn)分頁的三種效果
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)分頁的三種效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2020-06-06
vue實(shí)現(xiàn)可增刪查改的成績(jī)單
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)可增刪查改的成績(jī)單，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2016-10-10
Vuex模塊化與持久化深入講解
在實(shí)際項(xiàng)目開發(fā)過程中，如果公共數(shù)據(jù)比較多我們會(huì)使用vuex做公共狀態(tài)管理，但是在對(duì)瀏覽器進(jìn)行刷新操作的時(shí)候，會(huì)導(dǎo)致vuex內(nèi)的數(shù)據(jù)丟失，這種情況有些時(shí)候是沒問題的，但是有的時(shí)候我們需要某些數(shù)據(jù)可以持久化的保存，這樣就需要做對(duì)應(yīng)的處理
2023-01-01
淺談el-table中使用虛擬列表對(duì)對(duì)表格進(jìn)行優(yōu)化
我們會(huì)經(jīng)常使用表格，如果數(shù)據(jù)量大就直接可以分頁，如果多條可能會(huì)影響表格的卡頓，那么應(yīng)該如何進(jìn)行優(yōu)化，感興趣的可以了解一下
2021-08-08
vue this.reload 方法配置
這篇文章主要介紹了vue this.reload 方法配置，非常不錯(cuò)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
2018-09-09