useAsyncState 是 Vueuse 中的一个 Hook 函数，用于处理异步操作的状态。它可以帮助我们更方便地处理异步操作的 loading 状态、error 状态、以及异步操作返回的数据状态。通常用于处理异步请求的场景。
它接受一个Promise或返回Promise的异步函数作为第一个参数，一个初始状态作为第二个参数，并返回一个具有异步状态的对象，其中包含了状态、是否已准备好、是否正在加载、错误等属性，以及一个execute方法来执行异步操作。第三个参数可选，可用于配置选项。
useAsyncState的第三个可选参数包含以下选项：
delay: 执行异步操作的延迟时间，默认为0。immediate: 是否在调用时立即执行异步操作，默认为true。onError: 异步操作发生错误时的回调函数。onSuccess: 异步操作完成时的回调函数。resetOnExecute: 是否在每次执行异步操作前将状态重置为初始状态，默认为true。shallow: 是否使用shallowRef，默认为true。throwError: 是否在执行异步操作时抛出错误，默认为false。
useAsyncState返回的对象包括以下属性：
state: 异步操作的状态值。isReady: 异步操作是否已经完成。isLoading: 异步操作是否正在加载。error: 异步操作是否发生了错误。execute: 执行异步操作的方法，该方法可接收延迟时间和其他参数。
可以通过调用返回的对象的execute方法来启动异步操作。在异步操作完成时，状态、是否已准备好、是否正在加载、错误等属性都将得到更新。可以使用选项对象中的onError和onSuccess属性来设置在异步操作完成或发生错误时要调用的回调函数。可以使用选项对象中的resetOnExecute属性来控制是否在每次执行异步操作前将状态重置为初始状态。可以使用选项对象中的delay属性来控制异步操作执行前的延迟时间。可以使用选项对象中的throwError属性来控制在执行异步操作时是否抛出错误。
举例
import { useAsyncState } from 'vueuse'
// define your promise
const fetchUser = async (id: number) => {
const response = await fetch(`https://jsonplaceholder.typicode.com/users/${id}`)
return response.json()
}
// useAsyncState
const { state, isLoading, error, execute } = useAsyncState(fetchUser, null, {
immediate: false, // 是否立即执行，你可以手动执行 execute 函数来触发执行
delay: 1000, // 延迟执行时间，单位毫秒
onSuccess: (data) => console.log('fetch user success:', data),
onError: (err) => console.error('fetch user error:', err),
resetOnExecute: true, // 是否在执行 execute 函数前重置状态为 initialState
shallow: false, // 是否使用 shallowRef
throwError: false, // 是否在执行 execute 函数出错时抛出错误
})
// 调用 execute 函数来执行 promise，执行结果会保存在 state 中
execute(1) // 执行 promise，并传入参数 1
在上面的代码中，我们首先定义了一个异步函数 fetchUser，它会返回一个 Promise 对象。
然后我们使用 useAsyncState 来创建一个异步状态。在 useAsyncState 的第一个参数中，我们传入了 fetchUser 这个函数。在第二个参数中，我们传入了一个初始状态为 null。
useAsyncState 会返回一个对象，其中包含了异步状态的信息。我们可以通过访问 state 属性来获取当前状态的值。isLoading 属性表示当前是否正在加载中。error 属性表示当前是否发生了错误。execute 函数用来触发执行异步函数，并且可以传入参数。
useAsyncState 的第三个参数是一个可选的配置对象，可以用来配置异步状态的一些行为。在上面的代码中，我们配置了 immediate 为 false，这样就不会在组件初始化时立即执行异步函数。我们还配置了 delay 为 1000，表示执行异步函数前会延迟 1 秒。当异步函数执行成功时，会触发 onSuccess 回调函数，当执行失败时，会触发 onError 回调函数。resetOnExecute 为 true 表示在执行异步函数之前会重置状态为 initialState。shallow 表示是否使用 shallowRef。throwError 表示是否在执行异步函数出错时抛出错误。
shallowRef
shallowRef 是 Vue3 提供的一个函数，它可以用来创建一个响应式的基本类型值或非嵌套对象的引用（即浅层引用）。与 ref 不同的是，shallowRef 不会递归地将对象属性转换为响应式值。
使用 shallowRef 创建的值的变化，只有当被赋予新值时，它才能触发更新。如果被赋予新值的对象的属性发生了变化，但是该对象的引用没有发生变化，那么组件将不会响应更新。这种行为在某些情况下可以提高性能，因为不必为对象的每个属性都创建响应式引用。
在 useAsyncState 中，shallow 参数用来控制是否使用 shallowRef 创建响应式引用，默认值为 true，即使用 shallowRef。如果将 shallow 参数设置为 false，则会使用 ref 创建响应式引用。
