全局配置

我们通过导出 setGlobalOptions() 方法,来给你控制一些配置,避免重复繁琐地填入一些相同的配置

基于构建工具

如:vue-cli在新窗口打开vite在新窗口打开

在下面的例子 🌰  中,当前项目里所有使用到 VueRequest 的组件都能读取到传入的配置。更多可配置的全局属性,请参考 全局选项

// main.ts
import { setGlobalOptions } from 'vue-request';
// ...
setGlobalOptions({
  manual: true,
  // ...
});

// App.tsx
const { data: user } = useRequest('api/user');
const { data: job } = useRequest('api/job', { manual: false }); // 覆盖全局配置

使用组件注入配置

除了上述使用 API 的方式去设置全局配置以外,你还可以通过我们导出的 RequestConfig 组件,进行更加精细化的配置。如下所示,可以为不同的组件传入不同的配置。

import { defineComponent } from 'vue';
import { RequestConfig } from 'vue-request';
// ...
export default defineComponent({
  name: 'App',
  setup() {
    return () => (
      <div id="app">
        <RequestConfig config={{ loadingDelay: 300 }}>
          <ComponentA />
        </RequestConfig>
        <RequestConfig config={{ loadingDelay: 500 }}>
          <ComponentB />
        </RequestConfig>
      </div>
    );
  },
});

基于 CDN

如果你通过 CDN 来使用 VueRequest,你可以通过以下方式来设置全局配置。我们在 VueRequest 的实例上导出了 setGlobalOptions() 方法

<!-- ... -->
<script src="https://unpkg.com/vue-request.min.js"></script>
<script>
  VueRequest.setGlobalOptions({
    cacheTime: 12 * 3600,
  });
</script>

提示

配置权重:setGlobalOptions < RequestConfig < 局部 options

上次更新: 2/11/2022, 8:31:25 AM
贡献者: John