Skip to main content
Version: v3

Question and Answer

Why to create alova?​

Data requests have always been an indispensable and important part of applications. Since the birth of XMLHttpRequest, request schemes have emerged in endlessly. Client-side data interaction exploration has always focused on the simplicity of requests, such as $.ajax, axios, fetch api and Request tools such as react-query, the coding form continues to evolve from callback functions, Promise, to usehook. These js libraries have done a good job in making requests simple, but they only provide common functions, which means For different request scenarios such as sharing requests, paging requests, form submissions, uploading and downloading files, etc., developers still need to write complex codes themselves, which reduces development efficiency and performance cannot be guaranteed. As user experience becomes more and more important, In this era, application fluency has become more and more important.

Additionally, the collaboration between client and server is also separated. Front-end engineers need to consult API documents and manually write API functions, and any changes of APIs need to actively notify front-end engineers, which will make your product more uncontrollable.

We think there is a simpler solution is that based on your request scenarios such as pagination, form submission, breakpoint resumption, etc., select the corresponding useHook, which will help you manage data and control when requests should be sent. This allows developers to achieve more efficient Client-Server data interaction while writing little code.

Additionally, alova has very flexible expansion capabilities to implement request strategies in different scenarios. You can also customize your own request scenarios. This part is in Custom Chapter.

In order to cover more request scenarios, we also abstracted the request scenarios into Request scene model(RSM), which explains alova's request strategy scheme well. In the future, alova will continue to carry forward our exploration of request strategies.

Alternative to the request libraries?​

alova is a request strategy library, which was originally created to provide specific request strategy solutions for different request scenarios, so as to achieve a smooth request experience more concisely and elegantly, such as $.ajax, axios and fetch- api, etc. provide good support for request sending and response receiving, they are an essential part of the RSM process (request events), alova still needs to dependent on them to make requests, so we can Think of alova as an weaponry of the request library, making the request library more powerful.

Why binding UI framework?​

Decoupling a js library means using it in more scenarios. For example, axios can be used in nodejs, but it also means that developers need to write more template code, such as using useHooks to encapsulate axios. However, alova abandons more usage scenarios brought about by decoupling, and positions the Scope of usage in conjunction with the UI framework to use alova in the most streamlined way. This is for the benefit of developers and is prevalent in a UI framework. Sometimes, deep binding can provide developers with direct-use functions and improve the developer's experience without requiring too much template code.

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, you need to add the following configuration to tsconfig.json:

{
  "compilerOptions": {
    "esModuleInterop": true
  }
}
Is using alova in your project? please tell me!