快速开始
快速开始
安装
npm
npm install @superarale/vue-use-request
yarn
yarn add @superarale/vue-use-request
使用
<template>
<div>
<div>resutl: {{ result }}</div>
<div>loading: {{ loading }}</div>
<div>error: {{ error }}</div>
<button @click="run"></button>
</div>
</template>
<script lang="ts" setup>
import { onMounted } from 'vue';
import axios from 'axios';
import { useRequest } from '@superarale/vue-use-request';
const url = 'https://api.github.com/repos/mahoushoujoarale/vue-useRequest';
const request = async (signal) => {
const res = await axios.get<string>(url, {
signal,
});
return res.data;
};
const { result, loading, error, run } = useRequest(request);
onMounted(() => {
run();
});
</script>
在上述例子中，useRequest接收了一个异步请求函数request，返回三个状态值，result、loading和error。result、loading和error都是Vue的响应式引用shallowRef，它们的改变会同步到页面上。同时useRequest返回了一个run函数，通过调用run函数可以发起网络请求。异步函数request接收的第一个参数的类型是AbortSignal，它是 AbortController 的signal属性，在useRequest内部会将signal传递给request，request设置好对应的signal后，useRequest就可以通过AbortController来控制signal，从而达到真正意义上的取消网络请求的目的。
WARNING
请确保传给useRequest的request函数的第一个参数是AbortSignal类型，否则会产生意料之外的结果。