Global Options

We export the setGlobalOptions() method to give you control over some options and avoid repetition in some of the same options.

CLI

E.g., vue-cliopen in new window、viteopen in new window

In the following example, all components that use VueRequest in the current project can read the incoming options. For more configurable global options, please refer to Global Options.

// 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 }); // Override global options

Configure via components

In addition to using the API to set the global options, you can also use the RequestConfig component we exported for a more detailed configuration. As shown below, you can pass in different options for different components.

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

If you use the CDN version, you can set the global configuration in the following ways. We exported the setGlobalOptions() method on the instance of VueRequest

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

Tips

Options weight: setGlobalOptions < RequestConfig < local options