起步
安装
你可以通过 NPM在新窗口打开、YARN在新窗口打开 或者通过 <script>
的方式引入 unpkg.com在新窗口打开 上的包。
NPM
npm install vue-request
# or
yarn add vue-request
# or
pnpm install vue-request
CDN
对于生产环境,我们推荐链接到一个明确的版本号和构建文件,以避免新版本造成的不可预期的破坏。
<script src="https://unpkg.com/vue-request/dist/vue-request.min.js"></script>
一旦你在页面中添加了它,你就可以在 window.VueRequest
中访问我们导出的方法。
用例
<template>
<div>
<div v-if="loading">loading...</div>
<div v-if="error">failed to fetch</div>
<div v-if="data">Hey! {{ data }}</div>
</div>
</template>
<script lang="ts">
import { defineComponent } from 'vue';
export default defineComponent({
setup() {
const { data, loading, error } = useRequest(Service);
return {
data,
loading,
error,
};
},
});
</script>
在这个例子中,useRequest
接收了一个 Service
函数。Service
是一个异步的请求函数,换句话说,你可以使用 axios 来获取数据,然后返回一个 Promise。更具体的说明可以在数据请求中查看。
useRequest
还返回了三个值, data
、loading
和 error
。当请求还没完成时, data
将会为 undefined
同时,loading
将被设置为 true
。当请求完成后,则将会根据请求结果来设定 data
和 error
,并对页面进行渲染。这是因为 data
、 loading
和 error
是 Vue 的 响应式引用(shallowRef)在新窗口打开,它们的值将根据请求状态及请求结果来修改。