跳到主要内容

Ready

useRequest 提供了一个 options.ready 参数，当其值为 false 时，请求永远都不会发出。

其具体行为如下：

  1. 当 manual=false 自动请求模式时，每次 ready 从 false 变为 true 时，都会自动发起请求，会带上参数 options.defaultParams。
  2. 当 manual=true 手动请求模式时，只要 ready=false，则通过 run/runAsync 触发的请求都不会执行。

自动模式​

以下示例演示了自动模式下 ready 的行为。每次 ready 从 false 变为 true 时，都会重新发起请求。

network/useRequest/ready/index
import React from 'react';
import DemoContent from '@src/components/DemoContent';
import { Button, Field } from '@taroify/core';

import { useRequest } from 'taro-hooks';
import { useToggle } from '@taro-hooks/ahooks';
import Mock from 'mockjs';

function getUsername(): Promise<string> {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve(Mock.mock('@name()'));
    }, 1000);
  });
}

export default () => {
  const [ready, { toggle }] = useToggle(false);

  const { data, loading } = useRequest(getUsername, {
    ready,
  });

  return (
    <DemoContent title="Ready - 自动模式">
      <Field align="start">Ready: {JSON.stringify(ready)}</Field>
      <Field align="center">
        <Button
          loading={loading}
          color="primary"
          size="small"
          block
          onClick={toggle}
        >
          Toggle Ready
        </Button>
      </Field>
      <Field align="start">Username: {loading ? 'Loading' : data}</Field>
    </DemoContent>
  );
};

手动模式​

以下示例演示了手动模式下 ready 的行为。只有当 ready 等于 true 时，run 才会执行。

network/useRequest/ready/manualReady
import React from 'react';
import DemoContent from '@src/components/DemoContent';
import { Button, Field } from '@taroify/core';

import { useRequest } from 'taro-hooks';
import { useToggle } from '@taro-hooks/ahooks';
import Mock from 'mockjs';

function getUsername(): Promise<string> {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve(Mock.mock('@name()'));
    }, 1000);
  });
}

export default () => {
  const [ready, { toggle }] = useToggle(false);

  const { data, loading, run } = useRequest(getUsername, {
    ready,
    manual: true,
  });

  return (
    <DemoContent title="Ready - 手动模式">
      <Field align="start">Ready: {JSON.stringify(ready)}</Field>
      <Field align="center">
        <Button
          loading={loading}
          color="primary"
          size="small"
          block
          onClick={toggle}
        >
          Toggle Ready
        </Button>
      </Field>
      <Field align="start">Username: {loading ? 'Loading' : data}</Field>
      <Field align="center">
        <Button
          loading={loading}
          color="primary"
          size="small"
          block
          onClick={run}
        >
          run
        </Button>
      </Field>
    </DemoContent>
  );
};

API​

Options​

参数说明类型默认值
ready当前请求是否准备好了booleantrue