antdv-hook-enhance
On this page

loading状态控制相关 ​

useAutoRequest ​

针对单个接口的loading状态
多个按钮使用同一个状态，第二个参数可选
<script setup lang="ts">
import { message } from 'ant-design-vue'
import { useAutoRequest } from '@hooks/components'

const submitFetch = () => {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve('执行成功')
    }, 1500)
  })
}

const [loading, submit] = useAutoRequest(submitFetch, {
  onSuccess: (res) => {
    message.success(res)
  }
})
</script>

<template>
  <div>
    <a-space>
      <!-- 多个按钮使用同一个loading状态 -->
      <a-button :loading="loading">取消</a-button>
      <a-button :loading="loading" type="primary" @click="submit">提交</a-button>
    </a-space>
  </div>
</template>

<style lang="less" scoped></style>
<script setup lang="ts">
import { message } from 'ant-design-vue'
import { useAutoRequest } from '@hooks/components'

const submitFetch = () => {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve('执行成功')
    }, 1500)
  })
}

const [loading, submit] = useAutoRequest(submitFetch, {
  onSuccess: (res) => {
    message.success(res)
  }
})
</script>

<template>
  <div>
    <a-space>
      <!-- 多个按钮使用同一个loading状态 -->
      <a-button :loading="loading">取消</a-button>
      <a-button :loading="loading" type="primary" @click="submit">提交</a-button>
    </a-space>
  </div>
</template>

<style lang="less" scoped></style>

参数 ​

参数描述必选类型默认值
fun调用远程接口返回数据true()=>Promise-
options调用时的附加选项false见下文-

options ​

参数描述必选类型默认值
loading初始loading状态falsebooleanfalse
onSuccess成功时的回调false(data: any) => void-

返回值 ​

参数描述类型
requestLoadingloading状态boolean
run调用函数，参数与入参保持一致()=>Promise

useAutoLoading ​

针对多个接口的loading状态
多个按钮使用同一个状态，第二个参数可选
<script setup lang="ts">
import { message } from 'ant-design-vue'
import { useAutoLoading } from '@hooks/components'

const submitFetch = (type: number) => {
  return new Promise((resolve) => {
    console.log('submitFetch', type)
    setTimeout(() => {
      resolve('执行成功')
    }, 1500)
  })
}

const saveFetch = (type: number) => {
  return new Promise((resolve) => {
    console.log('saveFetch', type)

    setTimeout(() => {
      resolve('执行成功')
    }, 1500)
  })
}

const [loading, run] = useAutoLoading()

function submit(type: number) {
  if (type === 1) {
    run(submitFetch(type)).then((res) => {
      message.success(res)
    })
  } else {
    run(saveFetch(type)).then((res) => {
      message.success(res)
    })
  }
}
</script>

<template>
  <div>
    <a-space>
      <!-- 多个按钮使用同一个loading状态 -->
      <a-button :loading="loading" @click="submit(2)">暂存</a-button>
      <a-button :loading="loading" type="primary" @click="submit(1)">提交</a-button>
    </a-space>
  </div>
</template>

<style lang="less" scoped></style>
<script setup lang="ts">
import { message } from 'ant-design-vue'
import { useAutoLoading } from '@hooks/components'

const submitFetch = (type: number) => {
  return new Promise((resolve) => {
    console.log('submitFetch', type)
    setTimeout(() => {
      resolve('执行成功')
    }, 1500)
  })
}

const saveFetch = (type: number) => {
  return new Promise((resolve) => {
    console.log('saveFetch', type)

    setTimeout(() => {
      resolve('执行成功')
    }, 1500)
  })
}

const [loading, run] = useAutoLoading()

function submit(type: number) {
  if (type === 1) {
    run(submitFetch(type)).then((res) => {
      message.success(res)
    })
  } else {
    run(saveFetch(type)).then((res) => {
      message.success(res)
    })
  }
}
</script>

<template>
  <div>
    <a-space>
      <!-- 多个按钮使用同一个loading状态 -->
      <a-button :loading="loading" @click="submit(2)">暂存</a-button>
      <a-button :loading="loading" type="primary" @click="submit(1)">提交</a-button>
    </a-space>
  </div>
</template>

<style lang="less" scoped></style>

参数 ​

参数描述必选类型默认值
defaultLoading初始loading状态falsebooleanfalse

返回值 ​

参数描述类型
requestLoadingloading状态boolean
run包裹函数，参数为一个promise，回参也是promise，函数内部会监听入参promise的状态，并在适当时机更改loading状态(promise:Promise)=>Promise