Vue.js v3.0 组合式 API 之 useAsync：步入 API 请求封装的世界

2023-12-04 07:30:03

前言

在构建复杂的 Vue.js 应用时，经常会遇到需要发送异步请求获取数据的情况。这些请求可能是加载用户数据、获取商品列表，或者提交表单数据等。为了处理这些异步请求，我们需要对请求状态进行管理，如等待、成功和失败，并对请求结果进行相应的处理。

介绍 useAsync

Vue.js v3.0 中引入的组合式 API 提供了 useAsync 函数，它专门用来处理异步请求。useAsync 对接口请求进行统一封装，接收一个 promise 请求，并对接口返回的数据进行存储。同时，useAsync 使用 try catch 来捕获服务端或语法上的错误。

useAsync 的使用方式

useAsync 函数的用法非常简单，它接收两个参数：

promise 请求函数
一个可选的对象，用于配置 useAsync 的行为

如果你只需要使用默认配置，那么只需要传递一个 promise 请求函数即可。如果想对 useAsync 的行为进行自定义配置，则需要传递一个配置对象。

const { data, loading, error } = await useAsync(fetch('/api/users'));

在上面的代码中，useAsync 函数接收了一个 promise 请求函数 fetch('/api/users')。当调用 useAsync 时，它会自动发送请求并等待其返回结果。useAsync 将请求结果存储在 data 响应式变量中，并把请求的状态存储在 loading 和 error 响应式变量中。

useAsync 的配置选项

useAsync 提供了几个配置选项，可以让你自定义其行为。这些配置选项包括：

default：useAsync 默认情况下会将请求结果存储在 data 变量中。如果想使用其他变量名，可以设置 default 选项。
initialLoading：useAsync 默认情况下会在请求发送之前将 loading 变量设置为 true。如果想在请求发送之后才将 loading 变量设置为 true，可以设置 initialLoading 选项为 false。
immediate：useAsync 默认情况下会在组件挂载时立即发送请求。如果想在组件挂载后手动发送请求，可以设置 immediate 选项为 false。
manual：useAsync 默认情况下会在组件挂载时自动发送请求。如果想手动控制请求的发送时机，可以设置 manual 选项为 true。
refetchInterval：useAsync 可以自动重新发送请求。如果想设置重新发送请求的时间间隔，可以设置 refetchInterval 选项。
refetchOnWindowFocus：useAsync 可以根据 window 的 focus 状态自动重新发送请求。如果想启用此功能，可以设置 refetchOnWindowFocus 选项为 true。

useAsync 的使用场景

useAsync 可以用于处理各种异步请求，包括：