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.

Example

Send Captcha Demo

Features

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

Install

vue composition

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

react

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

svelte

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

use

Basic usage

Demonstrates basic use of form hooks.

vue composition

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

<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));
</script>

react

import { useState } from 'react';
import { apiSendCaptcha } from './api.js';
import { useCaptcha } from '@alova/scene-react';

const App = () => {
  const [mobile, setMobile] = ref('');
  const {
    // send status
    loading: sending,

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

  return (
    <div>
      <input
        value={mobile}
        onChange={({ target }) => setMobile(target.value)}
      />
      <button
        onClick={sendCaptcha}
        loading={sending}
        disabled={sending || countdown > 0}>
        {loading ? 'Sending...' : countdown > 0 ? `${countdown} can be resent` : 'Send verification code'}
      </button>
    </div>
  );
};

svelte

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

  let mobile = '';
  const {
    // send status
    loading: sending,

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

<input bind:value="{mobile}" />
<button
  on:click="{sendCaptcha}"
  loading="{$sending}"
  disabled="{$sending || $countdown > 0}">
  { $loading ? 'Sending...' : $countdown > 0 ? `after ${$countdown} seconds can be resent` : 'Send captcha' }
</button>

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
});

API

Hook configuration

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

Name	Description	Type	Default	Version
initialCountdown	Initial countdown, when the verification code is sent successfully, it will start countdown with this data	number	60	-

Responsive data

Inherit all responsive data from useRequest.

Name	Description	Type	Version
countdown	The current countdown, -1 per second, the verification code can only be sent again after the countdown ends	number	-

Action function

Inherit all action functions of useRequest.

name	description	function parameters	return value	version
send	Send a request, when the countdown is not over, the call will throw an error	Consistent with useRequest.send	Promise<Response>	-

Event

Inherit all events from useRequest.