起步

前提条件

确保 Vue 版本为 3.x

安装

你可以通过 NPM在新窗口打开YARN在新窗口打开 或者通过 <script> 的方式引入 unpkg.com在新窗口打开 上的包。

NPM

npm install vue-request
# or
yarn add 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 还返回了三个值, dataloadingerror。当请求还没完成时, data 将会为 undefined 同时,loading 将被设置为 true。当请求完成后,则将会根据请求结果来设定 dataerror,并对页面进行渲染。这是因为 dataloadingerror 是 Vue 的 响应式引用(Refs)在新窗口打开,它们的值将根据请求状态及请求结果来修改。

上次更新: 6/29/2022, 7:38:54 AM
贡献者: John