再浅浅了解一下alova吧3.0

在上一篇2.0的文章中，我们浅浅了解了一下alova请求方法实例，有一个很重要与我们老盆友axios不同的点，就是请求方法实例时，alova只是描述了各请求行为参数，但是并没有实际发送请求，这里就要讲到我们今天的重点，alova如何通过use hook实际发送请求！

在alova中提供了useRequest、useWatcher、useFetcher三种 use hook 实现请求时机，由它们控制何时应该发出请求，同时将会为我们创建和维护状态化的请求相关数据，如loading、data、error等，无需自主维护这些状态，今天我们来讲其中的一种，useRequest。

请求时机--useRequest

useRequest表示一次请求的发送，执行useRequest时，会默认发送一次请求，在页面获取初始数据时是最常用的方法，当然也支持关闭他的默认的请求发送，这在提交数据等点击事件是是非常有用滴。接下来让我们看看他的应用场景（这里我们的代码演示全部都是使用Vue的哟，如果想了解react，svelte可以去alova官网查看哈）。

初始数据请求

代码示例：

<template>
  <!-- 你可以直接使用 data 来渲染 todo 列表 -->
  <div v-if="loading">Loading...</div>
  <div
    v-else-if="error"
    class="error">
    {{ error.message }}
  </div>
  <template v-else>
    <div v-for="todo in data">
      <div class="todo-title">{{ todo.title }}</div>
      <div class="todo-time">{{ todo.time }}</div>
    </div>
  </template>
</template>

<script setup>
  const {
    loading,
    data,
    error
    // 直接将Method实例传入即可发送请求
  } = useRequest(todoListGetter, {
    // 请求响应前，data的初始值
    initialData: []
  });
</script>

tip状态数据解析：

• loading是加载状态值，当加载时，他的值为true，结束时自动更新为false，他是一个ref类型的值，可以通过loading.value去访问它，或者直接绑定在页面上.
• data我们熟悉的老盆友了，响应数据，同样是ref值。
• error请求错误对象，ref值，请求错误时有值，否则为undefined。

绑定请求回调

如果需要设置请求回调，你还可以在useRequest的返回参数中接收回调的设置函数,直接看代码吧。

代码示例：

const {
  // ...

  // 成功回调绑定
  onSuccess,

  // 失败回调绑定
  onError,

  // 完成回调绑定，回调在成功或失败都会调用
  onComplete
} = useRequest(todoListGetter);
onSuccess(event => {
  console.log('请求成功，响应数据为:', event.data);
  console.log('本次请求的method实例为:', event.method);
  console.log('响应数据是否来自缓存:', event.fromCache);
});
onError(event => {
  console.log('请求失败，错误信息为:', event.error);
  console.log('本次请求的method实例为:', event.method);
});
onComplete(event => {
  // event.status在成功时为success，失败时为error
  console.log('请求完成，状态为：', event.status);
  console.log('本次请求的method实例为:', event.method);
  console.log('响应数据是否来自缓存:', event.fromCache);
  if (event.data) {
    console.log('请求数据：'，event.data)
  } else if (event.error) {
    console.log('错误信息：'，event.error)
  }
});

手动发送请求

在上文讲到，useRequest会默认发送请求，但是我们也可以关闭默认请求，转为手动触发请求，并在useRequest中接受send函数用于手动发送请求，send函数将手动返回带Promise的实例，它将在请求响应后改为resolve状态。 代码示例：

const {
  // ...
  // 手动发送器请求的函数，调用后发送请求
  send: addTodo
} = 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);
    });
};

tips：

• immediate设置为false就是默认不发出请求
• handleAddTodo就是绑定触发的函数
• addTo便是send函数，注意他返回的是一个Promise对象，可接受响应数据

强制发送请求

缓存数据可以很好地提升应用流畅性和减小服务端压力，但同时也存在着数据过期的问题，当你希望穿透缓存获取最新数据时，在 use hooks 的配置中设置force属性可以帮助你。

设置静态的force值

force的静态值默认为false，我们这里直接将设置为true，使它传透缓存发送请求

代码示例：

useRequest(alovaInstance.Get('/todo'), {
  force: true
});

动态设置force值

在实际开发中，我们需要根据不同的情况来判断是否需要强制发送请求，此时将force设置成一个函数，此函数可以通过send函数传入。

const { send } = useRequest(alovaInstance.Get('/todo'), {
  force: id => {
    return !!id;
  }
});
send(1);

send函数参数传递规则

在上面的示例中，调用 send 函数手动触发请求，它可以接受任意多个参数，这些参数将分别被以下 5 个函数接收：

在useRequest回调函数里面接受

当将useRequest的第一个参数设置为回调函数可以接受到，这通常在删除列表里面很有效果

代码示例：

const { send } = useRequest(id => removeTodoPoster(id));
send(1); // 上面回调函数中的id将接收到1

在onSuccess，onError，onComplete回调函数中被接受

onSuccess，onError，onComplete回调函数中的event。sendArgs以数组形式接受。

代码示例：

const { send, onSuccess, onError, onComplete } = useRequest(newTodo => alovaInstance.Post('/todo', newTodo));
onSuccess(event => {
  // sendArgs的值为[1]
  console.log(event.sendArgs);
});
onError(event => {
  // sendArgs的值为[1]
  console.log(event.sendArgs);
});
onComplete(event => {
  // sendArgs的值为[1]
  console.log(event.sendArgs);
});

// 发送请求
send(1);

在force中被接收

直接代码实例：

const { send } = useRequest(alovaInstance.Get('/todo'), {
  force: id => {
    return !!id;
  }
});
send(1);

在这一篇文章中，我们浅浅了解了一下使用useRequest发送请求，下一次我们在了解一下useWatcher是如何发送请求滴！