Vue-await-component NPM

vue-await-component

处理 promise 的组件，提供以下 3 个组件

Await

处理 promise 的功能组件

props (问号表示可选属性)

`prop`(属性)	`type`(类型)	`description`(描述)
resolve	Promise \| any	处理的任务
complete?	boolean	完整的，不展示 pending 和 reject 插槽
delay?	number	延迟，任务完成快，pending 和 resolve 插槽切换快，会闪烁
timeout?	number	超时，任务未完成，会触发超时错误
onStart?	() => void	任务开始时执行
onEnd?	() => void	任务完成时执行，出错也执行
onError?	(error: any) => void	任务出错时执行

slots (问号表示可选插槽，可选参数)

`name`(插槽名)	`arguement`(接收参数)	`description`(描述)
pending?	placeholder?: Ref	promise执行时展示
resolve	data: any	promise完成时展示
reject?	error: any	promise出错时展示
default?	data: Data	包装其他插槽结果

type Data = { component: Component; status: "pending" | "resolve" | "reject"; placeholder?: Ref<HTMLElement> };

示例

vue模板

<script setup>
import {shallowRef} from "vue";
import {Await} from "vue-await-component";

const dataPromise = shallowRef(Promise.resolve("hello world"));

</script>

<template>
  <div>
    <Await :resolve="dataPromise">
      <template #pending>
        <h1>loading...</h1>
      </template>
      <template #resolve="data">
        <h1>{{data}}</h1>
      </template>
      <template #error>
        <h1>error...</h1>
      </template>
      <template #default="{component}">
        <div style="height: 100px; border: 1px solid;">
          <component :is="component"></component>
        </div>
      </template>
    </Await>
  </div>
</template>

import {defineComponent, shallowRef} from "vue";
import {Await} from "vue-await-component";

const Test = defineComponent(() => {
  const dataPromise = shallowRef(Promise.resolve("hello world"));

  return () => (
    <div>
      <Await resolve={dataPromise.value}>
        {{
          pending: () => (
            <h1>loading...</h1>
          ),
          resolve: (data) => (
            <h1>{data}</h1>
          ),
          error: (error) => (
            <h1>error...</h1>
          ),
          default: ({component}) => (
            <div style={"height: 100px; border: 1px solid;"}>
              {component}
            </div>
          ),
        }}
      </Await>
    </div>
  );
}, {name: "Test"});

AwaitList

控制多个 Await 的功能组件

props (问号表示可选属性)

`prop`(属性)	`type`(类型)
order?	"forwards" \| "backwards" \| "together"
tail?	"collapsed"
gap?	number

order
forwards
按从上到下顺序处理 Await 组件数据，前一个 Await 在屏幕上显示结果后，下一个 Await 才能显示。适用于必须按照顺序显示结果的情况
backwards
按从下到上顺序处理
together
所有 Await 组件都准备好数据了，一起显示
tail
collapsed
在 order 为 forwards 或 backwards 时有效
只展示当前正在处理的 Await 组件的 pending 插槽
gap
在 order 为 forwards 或 backwards 时有效
每个 Await 中间隔多长时间再处理

示例

vue模板

<script setup>
import {shallowRef} from "vue";
import {Await, AwaitList} from "vue-await-component";

function sleep(delay, value) {
  return new Promise(resolve => {
    setTimeout(() => {
      resolve(value);
    }, delay);
  });
}

const dataPromise1 = shallowRef(sleep(3000, "hello"));
const dataPromise2 = shallowRef(sleep(2000, "hi"));
const dataPromise3 = shallowRef(sleep(1000, "你好"));

</script>

<template>
  <div>
    <AwaitList order="forwards" tail="collapsed">
      <Await :resolve="dataPromise1">
        <template #pending>
          <h1>loading...</h1>
        </template>
        <template #resolve="data">
          <h1>{{data}}</h1>
        </template>
      </Await>
      <Await :resolve="dataPromise2">
        <template #pending>
          <h1>loading...</h1>
        </template>
        <template #resolve="data">
          <h1>{{data}}</h1>
        </template>
      </Await>
      <Await :resolve="dataPromise3">
        <template #pending>
          <h1>loading...</h1>
        </template>
        <template #resolve="data">
          <h1>{{data}}</h1>
        </template>
      </Await>
    </AwaitList>
  </div>
</template>

import {defineComponent, shallowRef} from "vue";
import {Await, AwaitList} from "vue-await-component";

function sleep(delay, value) {
  return new Promise(resolve => {
    setTimeout(() => {
      resolve(value);
    }, delay);
  });
}

const Test = defineComponent(() => {
  const dataPromise1 = shallowRef(sleep(3000, "hello"));
  const dataPromise2 = shallowRef(sleep(2000, "hi"));
  const dataPromise3 = shallowRef(sleep(1000, "你好"));

  return () => (
    <div>
      <AwaitList order="forwards" tail="collapsed">
        <Await resolve={dataPromise1.value}>
          {{
            pending: () => <h1>loading...</h1>,
            resolve: (data) => <h1>{data}</h1>,
          }}
        </Await>
        <Await resolve={dataPromise2.value}>
          {{
            pending: () => <h1>loading...</h1>,
            resolve: (data) => <h1>{data}</h1>,
          }}
        </Await>
        <Await resolve={dataPromise3.value}>
          {{
            pending: () => <h1>loading...</h1>,
            resolve: (data) => <h1>{data}</h1>,
          }}
        </Await>
      </AwaitList>
    </div>
  );
}, {name: "Test"});

AwaitView

控制 Await 组件，当组件首次出现在 view 视口中，在处理数据，之后就相当于普通的 Await 组件
使用 IntersectionObserver api 实现

props (问号表示可选属性)

`prop`(属性)	`type`(类型)	`description`(描述)
root?	Root	边界盒默认为 document
rootIsParent?	boolean	边界盒为父元素
rootMargin?	string	到边界盒的矩形偏移量
threshold?	number \| number[]	交叉比率
onIntersection?	Intersection	交叉回调函数
onResolve?	(resolve: any, first: boolean) => any	处理 Await resolve

import type {MaybeRefOrGetter} from "vue";

type Root = MaybeRefOrGetter<Element | Document | null>;
type Intersection = (entry: IntersectionObserverEntry, done: () => void) => void;

示例

vue 模板

<script setup>
import {shallowRef} from "vue";
import {Await, AwaitView} from "vue-await-component";

const dataPromise = shallowRef(Promise.resolve("hello world"));

</script>

<template>
  <div>
    <!--占位置-->
    <div style="height: 120vh;"></div>
    <!--出现在屏幕中后，在渲染结果-->
    <AwaitView>
      <Await :resolve="dataPromise">
        <template #pending>
          <h1>loading...</h1>
        </template>
        <template #resolve="data">
          <h1>{{ data }}</h1>
        </template>
        <template #default="{component, placeholder}">
          <div :ref="placeholder" style="height: 200px; border: 1px solid;">
            <component :is="component"></component>
          </div>
        </template>
      </Await>
    </AwaitView>
  </div>
</template>

import {defineComponent, shallowRef} from "vue";
import {Await, AwaitView} from "vue-await-component";

const Test = defineComponent(() => {
  const dataPromise = shallowRef(Promise.resolve("hello world"));

  return () => (
    <div>
      <div style="height: 120vh;"></div>
      <AwaitView>
        <Await resolve={dataPromise.value}>
          {{
            pending: () => <h1>loading...</h1>,
            resolve: (data) => <h1>{data}</h1>,
            default: ({component, placeholder}) => (
              <div ref={placeholder} style="height: 200px; border: 1px solid;">
                {component}
              </div>
            ),
          }}
        </Await>
      </AwaitView>
    </div>
  );
}, {name: "Test"});

EOF

vue component await promise

1 year ago

1 year ago

2 years ago

2 years ago

2 years ago