全局配置

我们通过导出 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@v1/dist/vue-request.min.js"></script>
<script>
  VueRequest.setGlobalOptions({
    cacheTime: 12 * 3600,
  });
</script>

提示

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