基础用法
引入useRequest
import { useRequest } from '@superarale/vue-use-request';
创建请求函数
request 函数需要设置第一个参数AbortSignal，并传递给axios或fetch。
const url = 'https://restapi.amap.com/v3/ip';
const request = async (signal, params: IParams) => {
const res = await axios.get<IResult>(url, {
signal,
params,
});
return res.data;
};
使用useRequest
将request作为参数传递给 useRequest。
const { result, loading, error, run } = useRequest(request);
发起请求
调用返回的 run 函数，传入对应参数发起请求。
const paras: IParams = {
key: correctKey,
};
run(params);
访问请求状态
你可以通过返回的变量来访问请求状态：
- result：包含请求的结果（如果发生错误则为null）。
- loading：一个布尔值，指示是否当前有请求正在进行。
- error：包含请求期间发生的任何错误（如果没有错误则为 null）。
完整示例
result:
loading: false
error:
<template>
<div class="demo-container">
<h3>result: <span>{{ result }}</span></h3>
<h3>loading: <span>{{ loading }}</span></h3>
<h3>error: <span>{{ error }}</span></h3>
<button class="primary" @click="handleRun">run</button>
<button @click="handleRunError">runError</button>
<button @click="reset">reset</button>
</div>
</template>
<script lang="ts" setup>
import { useRequest } from '@superarale/vue-use-request';
import { request, IParams, correctKey } from './request';
const reset = () => {
result.value = null;
loading.value = false;
error.value = null;
};
const { result, loading, error, run } = useRequest(request);
const handleRun = () => {
const params: IParams = {
key: correctKey,
};
run(params);
};
const handleRunError = () => {
const params: IParams = {
key: 'badkey',
};
run(params);
};
</script>
