Skip to main content

send captcha

strategy type

use hook

Before using extension hooks, make sure you are familiar with the basic usage of alova.

The verification code sending hook saves you the trouble of developing the verification code sending function.


Send Captcha Demo


  • ✨ The countdown will start automatically after the verification code is sent;
  • ✨ Custom countdown seconds;
  • ✨ Verification code sending limit;


# npm
npm install @alova/scene-vue --save
yarn add @alova/scene-vue


Basic usage

Demonstrates basic use of form hooks.

<input v-model="mobile" />
:disabled="sending || countdown > 0">
{{ loading ? 'Sending...' : countdown > 0 ? `${countdown} can be resent` : 'Send verification code' }}

<script setup>
import { ref } from 'vue';
import { apiSendCaptcha } from './api.js';
import { useCaptcha } from '@alova/scene-vue';

const mobile = ref('');
const {
// send status
loading: sending,

// Call sendCaptcha to request the interface to send the verification code
send: sendCaptcha
} = useCaptcha(() => apiSendCaptcha(mobile.value));

By default, after the verification code is successfully sent, it will count down for 60 seconds, and calling send when the countdown is not over will throw an error.

Custom countdown seconds

You can also customize the countdown seconds

useCaptcha(() => apiSendCaptcha(mobile.value), {
// Set the countdown to 20 seconds
initialCountdown: 20


Hook configuration

Inherit all configurations of useRequest except immediate, immediate in useCaptcha has been hard-coded to false.

initialCountdownInitial countdown, when the verification code is sent successfully, it will start countdown with this datanumber60-

Responsive data

Inherit all responsive data from useRequest.

countdownThe current countdown, -1 per second, the verification code can only be sent again after the countdown endsnumber-

Action function

Inherit all action functions of useRequest.

namedescriptionfunction parametersreturn valueversion
sendSend a request, when the countdown is not over, the call will throw an errorConsistent with useRequest.sendPromise<Response>-


Inherit all events from useRequest.