You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
59 lines
1.9 KiB
JavaScript
59 lines
1.9 KiB
JavaScript
import { ref } from "vue"
|
|
|
|
/**
|
|
* 用于执行 API 请求和管理相关状态的自定义钩子。
|
|
*
|
|
* @param {Function} apiF - 表示 API 请求的异步函数。
|
|
* @param {Object} [opt={}] - 可选配置选项。
|
|
* @param {Ref<boolean>} [opt.loading=false] - 可选的 loading 状态变量。
|
|
*
|
|
* @returns {Object} - 包含响应式变量和 fetchData 函数的对象。
|
|
* @property {Ref<boolean>} loading - 表示 API 请求加载状态的 ref。
|
|
* @property {Ref<any>} result - 表示 API 请求结果的 ref。
|
|
* @property {Ref<any>} error - 表示 API 请求失败时的错误的 ref。
|
|
* @property {Function} fetchData - 用于执行 API 请求并更新状态变量的函数。
|
|
*/
|
|
export const useApi = (apiF, opt = {}) => {
|
|
// 使用 ref 包装状态变量
|
|
const loading = opt.loading || ref(false)
|
|
const result = ref(null)
|
|
const error = ref(null)
|
|
|
|
/**
|
|
* 执行 API 请求并更新状态的函数。
|
|
*
|
|
* @param {*} p - 用于 API 请求的参数。
|
|
* @returns {Promise} - 包含 API 响应对象的 Promise。
|
|
*/
|
|
const fetchData = async (p) => {
|
|
try {
|
|
// 开始请求，设置 loading 为 true
|
|
loading.value = true
|
|
// 执行异步 API 请求
|
|
const res = await apiF(p)
|
|
|
|
// 根据返回的 code 判断请求是否成功
|
|
if (res.code === 0) {
|
|
// 请求成功，更新 result 变量
|
|
result.value = res
|
|
} else {
|
|
// 请求失败，更新 error 变量
|
|
error.value = res
|
|
}
|
|
|
|
// 返回 API 响应对象
|
|
return res
|
|
} catch (err) {
|
|
// 捕获异常，更新 error 变量并抛出错误
|
|
error.value = err
|
|
throw err
|
|
} finally {
|
|
// 无论请求成功或失败，都会在最终阶段设置 loading 为 false
|
|
loading.value = false
|
|
}
|
|
}
|
|
|
|
// 返回包含状态变量和 fetchData 函数的对象
|
|
return { loading, result, error, fetchData }
|
|
}
|