Quick Start

Example tip

If you haven’t learned about alova yet, it is recommended that you read alova overview first.

Install

npm

npm install alova --save

yarn

yarn add alova

pnpm

pnpm add alova

bun

bun add alova

You can also use alova through CDN

Create alova instance

In alova, a request needs to be made through an alova instance. Let's create one first. When creating an alova instance, you need to specify a request adapter. It is recommended to use the GlobalFetch request adapter here, which is a package based on the fetch API.

esModule

import { createAlova } from 'alova';
import GlobalFetch from 'alova/GlobalFetch';

const alovaInstance = createAlova({
  requestAdapter: GlobalFetch()
});

commonJS

const { createAlova } = require('alova');
const GlobalFetch = require('alova/GlobalFetch');

const alova = createAlova({
   requestAdapter: GlobalFetch();
});

When using GlobalFetch in nodejs, the nodejs version requires v17.5, or you can use axios request adapter.

deno

import { createAlova } from 'npm:alova';
import GlobalFetch from 'npm:alova/GlobalFetch';

const alova = createAlova({
   requestAdapter: GlobalFetch();
});

GET request

Sending a request via alovaInstance.Get will receive a Response instance thanks to the GlobalFetch request adapter, which is simple.

import { createAlova } from 'alova';
import GlobalFetch from 'alova/GlobalFetch';

const alovaInstance = createAlova({
  requestAdapter: GlobalFetch()
});
alovaInstance
  .Get('https://jsonplaceholder.typicode.com/todos/1')
  .then(response => response.text())
  .then(data => {
    app.innerHTML = data;
  });

Open Sandbox

In an asynchronous function, you can also use await alovaInstance.Get to wait for a response.

POST request

Submitting data via alovaInstance.Post is also easy.

import { createAlova } from 'alova';
import GlobalFetch from 'alova/GlobalFetch';

const alovaInstance = createAlova({
  requestAdapter: GlobalFetch()
});
alovaInstance
  .Post('https://jsonplaceholder.typicode.com/posts', {
    title: 'foo',
    body: 'bar',
    userId: 1
  })
  .then(response => response.text())
  .then(data => {
    app.innerHTML = data;
  });

Open Sandbox

What’s next?

In fact, this is just the simplest request example. We will learn more about the features in the next chapters, so let's start learning.