Skip to main content
Version: v3

Troubleshooting

How to use alova via cdn?​

<!DOCTYPE html>
<html lang="en">
  <head>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    <script src="https://unpkg.com/alova/dist/alova.umd.min.js"></script>
    <script src="https://unpkg.com/alova/dist/adapter/fetch.umd.min.js"></script>
    <script src="https://unpkg.com/alova/dist/hooks/vuehook.umd.min.js"></script>
  </head>
  <body>
    <div id="app">
      <div v-if="loading">Loading...</div>
      <div v-else-if="error">{{ error.message }}</div>
      <span v-else>responseData: {{ data }}</span>
    </div>
  </body>
  <script>
    const alovaInstance = alova.createAlova({
      statesHook: VueHook,
      requestAdapter: alovaFetch(),
      responded: response => response.json()
    });

    Vue.createApp({
      setup() {
        return alova.useRequest(
          alovaInstance.Get('https://jsonplaceholder.typicode.com/todos/1')
        );
      }
    }).mount('#app');
  </script>
</html>

What to pay attention to in React-Native?​

When using alova to develop React-Native applications, you can also use alova/fetch.

But there are the following precautions:

Metro version

In alova's package.json, exports is used to define multiple export items, so you need to ensure these two points:

  1. Metro version is higher than 0.76.0

  2. Enable resolver.unstable_enablePackageExports in metro.config.js. Click here for details

Error when importing alova/fetch​

When you introduce alova/fetch in a typescript project and get the error module "${1}/alova/typings/fetch" has no default export, please check the following 2 points:

  1. add configuration below to tsconfig.json:
{
  "compilerOptions": {
    "esModuleInterop": true
  }
}
  1. downgrade typescript version to 5.5.x or below.
Is using alova in your project? please tell me!