vue-hooks-plus/es/useRequest/component-use/UseRequest.js

Vue hooks library

import { defineComponent, computed, unref, watch } from "vue";
import useRequest from "../useRequest";
import { isEqual } from "lodash-es";
function createUseRequestComponent() {
  const Comp = defineComponent({
    name: "UseRequest",
    props: {
      service: {
        type: Function,
        required: true
      },
      manual: {
        type: Boolean,
        default: false
      },
      ready: {
        type: Object,
        default: () => ({
          ready: false
        })
      },
      refreshDeps: {
        type: Array,
        default: () => []
      },
      plugins: {
        type: Array,
        default: () => []
      },
      formatResult: {
        type: Function,
        default: void 0
      }
    },
    slots: Object,
    setup(props, { slots }) {
      const service = computed(() => unref(props.service));
      const plugins = computed(() => unref(props.plugins));
      const manual = props.manual;
      const ready = computed(() => props.ready);
      const refreshDeps = computed(() => props.refreshDeps);
      const options = {
        ready,
        refreshDeps,
        manual: props.manual,
        formatResult: props.formatResult
      };
      const result = useRequest(
        service.value,
        options,
        plugins.value
      );
      watch(refreshDeps, (newVal, oldVal) => {
        if (isEqual(newVal, oldVal))
          return;
        if (!manual) {
          result == null ? void 0 : result.refresh();
        }
      });
      return () => {
        if (result.loading.value && slots.loading) {
          return slots.loading();
        }
        if (result.error.value && slots.error) {
          return slots.error({ error: result.error.value });
        }
        if (slots.default) {
          return slots.default(computed(() => result).value);
        }
        return null;
      };
    }
  });
  return Comp;
}
export {
  createUseRequestComponent as default
};