版本：v3

Troubleshooting

如何通过 cdn 使用 alova？

vue
react
svelte

<!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>

<!DOCTYPE html>
<html lang="en">
  <head>
    <script src="https://unpkg.com/react@18/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
    <script src="https://unpkg.com/babel-standalone@6/babel.min.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/reacthook.umd.min.js"></script>
  </head>
  <body>
    <div id="app"></div>
  </body>
  <script type="text/babel">
    const alovaInstance = alova.createAlova({
      statesHook: ReactHook,
      requestAdapter: alovaFetch(),
      responded: response => response.json()
    });

    const App = () => {
      const { loading, data, error } = alova.useRequest(
        alovaInstance.Get('https://jsonplaceholder.typicode.com/todos/1')
      );

      if (loading) {
        return <div>Loading...</div>;
      } else if (error) {
        return <div>{error.message}</div>;
      }
      return <span>responseData: {JSON.stringify(data)}</span>;
    };
    const root = ReactDOM.createRoot(document.getElementById('app'));
    root.render(<App />);
  </script>
</html>

在 React-Native 中要注意什么？

使用 alova 开发 React-Native 应用时，你也可以使用 alova/fetch。

但是有以下的注意事项：

metro 版本

在 alova 中的package.json中使用了exports来定义多个导出项，因此需要确保这两点：

metro 版本高于 0.76.0
在metro.config.js中开启resolver.unstable_enablePackageExports。详情点此查看

引入`alova/fetch`时报错

当在 typescript 项目中引入alova/fetch时报模块"${1}/alova/typings/fetch"没有默认导出的错误时，请检查以下两点：

在tsconfig.json中添加如下配置：

{
  "compilerOptions": {
    "esModuleInterop": true
  }
}

降级 typescript 版本到 5.5.x 及以下。

如何通过 cdn 使用 alova？​

在 React-Native 中要注意什么？​

引入alova/fetch时报错​

如何通过 cdn 使用 alova？

在 React-Native 中要注意什么？

引入`alova/fetch`时报错