---
title: 快速上手
sidebar_position: 1
---

:::info

目前**useRequest**的版本代码为**v3**. 故不再内置**Taro.request**. 若从**1.x**迁移用户请注意

:::

`useRequest` 是一个强大的异步数据管理的 Hooks，Taro 项目中的网络请求场景使用 `useRequest` 就够了。

`useRequest` 通过插件式组织代码，核心代码极其简单，并且可以很方便的扩展出更高级的功能。目前已有能力包括：

- 自动请求/手动请求
- 轮询
- 防抖
- 节流
- 屏幕聚焦重新请求
- 错误重试
- loading delay
- SWR(stale-while-revalidate)
- 缓存

接下来让我们先从两个最简单的例子认识 `useRequest`。

### 默认用法

`useRequest` 的第一个参数是一个异步函数，在组件初次加载时，会自动触发该函数执行。同时自动管理该异步函数的 `loading` , `data` , `error` 等状态。

import Tabs from '@theme/Tabs';
import TabItem from '@theme/TabItem';
import CodeBlock from '@theme/CodeBlock';

import CombineTabs from '@site/src/components/Tabs';

<Tabs groupId="codeDisplayGroup">
<TabItem value="React" label="React">

```jsx showLineNumbers
const { data, error, loading } = useRequest(getUsername);
```

</TabItem>
<TabItem value="Vue" label="Vue">

```html showLineNumbers
<template>
  <block>
    <view>{{request.loading}}</view>
    <view>{{request.data}}</view>
    <view>{{request.error}}</view>
  </block>
</template>
<script>
  export default {
    setup() {
      // 由于要保证request内部的变量不失活。 这里简单的可以将request直接抛出
      const request = useRequest(getUsername);

      return {
        request,
      };
    },
  };
</script>
```

</TabItem>
</Tabs>

<code src="useRequest/basic/index" group="network" />

### 手动触发

如果设置了 `options.manual = true`，则 useRequest 不会默认执行，需要通过 `run` 来触发执行。

<Tabs groupId="codeDisplayGroup">
<TabItem value="React" label="React">

```jsx showLineNumbers
const { loading, run } = useRequest(changeUsername, {
  manual: true,
});
```

</TabItem>
<TabItem value="Vue" label="Vue">

```html showLineNumbers
<template>
  <block>
    <view @click="request.run()">{{request.loading}}</view>
    <view>{{request.data}}</view>
  </block>
</template>
<script>
  export default {
    setup() {
      // 由于要保证request内部的变量不失活。 这里简单的可以将request直接抛出
      const request = useRequest(changeUsername, {
        manual: true,
      });

      return {
        request,
      };
    },
  };
</script>
```

</TabItem>
</Tabs>

<code src="useRequest/basic/manualRun" group="network" />

上面两个例子，我们演示了 `useRequest` 最基础的用法，接下来的我们开始逐个详细介绍 `useRequest` 的特性。
