自动管理请求状态

在企业级项目中，在视图中展示数据的传输状态非常重要，这可以让用户清晰地知道他们想要的内容现在怎么样了。在页面获取初始数据或提交数据时，通常可以使用useRequest来自动管理请求的状态。

提醒

在使用 useRequest 前，请确保已设置 statesHook。

获取初始化数据

useRequest 表示一次请求的发送，调用时默认将发送一次请求。

vue composition

<template>
  <div v-if="loading">Loading...</div>
  <div v-else-if="error">{{ error.message }}</div>
  <span v-else>responseData: {{ data }}</span>
</template>

<script setup>
import { useRequest } from 'alova';
import { alovaInstance } from './api';

// 使用alova实例创建method并传给useRequest即可发送请求

const { loading, data, error } = useRequest(alovaInstance.Get('/todos/1'));
</script>

Open Sandbox

react

import { useRequest } from 'alova';
import { alovaInstance } from './api';

const App = () => {
  // 使用alova实例创建method并传给useRequest即可发送请求

  const { loading, data, error } = useRequest(alovaInstance.Get('/todos/1'));

  if (loading) {
    return <div>Loading...</div>;
  } else if (error) {
    return <div>{error.message}</div>;
  }
  return <span>responseData: {JSON.stringify(data)}</span>;
};
export default App;

Open Sandbox

svelte

<script>
import { useRequest } from 'alova';
import { alovaInstance } from './api';

// 使用alova实例创建method并传给useRequest即可发送请求
const { loading, data, error } = useRequest(alovaInstance.Get('/todos/1'));
</script>

{#if $loading}
<div>Loading...</div>
{:else if $error}
<div>{ $error.message }</div>
{:else}
<span>responseData: { data }</span>
{/if}

vue options

<template>
  <div v-if="todo.loading">Loading...</div>
  <div v-else-if="todo.error">{{ todo.error.message }}</div>
  <span v-else>responseData: {{ todo.data }}</span>
</template>

<script>
import { mapAlovaHook } from '@alova/vue-options';
import { useRequest } from 'alova';
import { alovaInstance } from './api';

export default {
  mixins: mapAlovaHook(function () {
    return {
      // 使用alova实例创建method并传给useRequest即可发送请求

      todo: useRequest(alovaInstance.Get('/todos/1'))
    };
  }),
  data() {
    return {};
  }
};
</script>

Open Sandbox

修改响应式数据

你也可以修改useRequest创建的响应式数据。

vue composition

const { data, loading, error, update } = useRequest(todoListGetter);

// ...
// 直接修改data值
data.value = {};

// 或者通过update函数修改
update({
  data: {}
});

react

在 react 中，返回的状态是直接可使用的数据，因此需通过update函数来修改。

const { data, loading, error, update } = useRequest(todoListGetter);

// ...
// 通过update修改data值
update({
  data: {}
});

svelte

在 svelte 中，useRequest返回的状态为writable类型。

const { data, loading, error, update } = useRequest(todoListGetter);

// ...
// 直接修改data值
$data = {};
// 或data.update(d => ({}));

// 或者通过update函数修改
update({
  data: {}
});

vue options

export default {
  mixins: mapAlovaHook(function () {
    todo: useRequest(todoListGetter);
  }),
  methods: {
    handleModifyTodo() {
      // 直接修改data值
      this.todo.data = {};

      // 或者通过update函数修改
      this.todo.update({
        data: {}
      });
    }
  }
};

何时使用 useRequest ，何时通过await alovaInstance.Get 发送请求。

useHook 的使用规范

请注意，useRequest只能用于组件内发送请求，在组件外，你可以通过 method 实例直接发送请求，并且 useRequest 的使用需要符合 use hook 使用规则，即只能在函数最外层调用。

❌❌❌ 不推荐在在循环、条件判断或者子函数中调用，例如以下在 click 回调中的使用示例，在回调函数中使用时，虽然可以正常发起请求，但 use hook 返回的响应式数据无法在视图中使用，循环和条件判断中使用也是如此。

// ❌ bad
const handleClick = () => {
  const { loading, data } = useRequest(getter);
};

// -------
// ✅ good
const { loading, data, send } = useRequest(getter, {
  immediate: false
});
const handleClick = () => {
  send();
};

手动发送请求

当你需要创建一条新的 todo 项时，可以先关闭默认发送请求，转为手动触发请求，并在 useRequest 中接收send函数用于手动发送请求，send函数将返回带响应数据的 Promise 实例，它将在请求响应后改为 resolve 状态。

此时为了接收send函数传入参数，可以将useRequest的第一个参数设置为函数，我们称这个函数为 method handler。

const {
  // ...
  // 手动发送器请求的函数，调用后发送请求
  send: addTodo

  // 在这边将会接收到 send 函数的参数
} = useRequest(newTodo => alovaInstance.Post('/todo', newTodo), {
  // 当immediate为false时，默认不发出
  immediate: false
});

// 手动发送请求
const handleAddTodo = () => {
  const newTodo = {
    title: '新的todo项',
    time: new Date().toLocaleString()
  };
  // send函数返回一个Promise对象，可接收响应数据
  addTodo(newTodo)
    .then(result => {
      console.log('新增todo项成功，响应数据为:', result);
    })
    .catch(error => {
      console.log('新增todo项失败，错误信息为:', error);
    });
};

send函数可以让你自由地重复发起请求。

[2.9.0+] 在 react 中，send 函数使用了useCallback包裹，同时它也不受闭包陷阱限制，你可以直接在事件中使用它，不用担心引起性能问题。

API

完整的 API 文档请查看核心 useHooks。