快速开始

示例提示

如果你还未了解 alova，推荐你先阅读 alova 概述。

安装

npm

npm install alova --save

yarn

yarn add alova

pnpm

pnpm add alova

bun

bun add alova

你也可以通过 CDN 使用 alova

创建 alova 实例

在 alova 中需要通过 alova 实例发起请求，我们先创建一个。在创建 alova 实例时需要指定请求适配器，在这里推荐使用GlobalFetch请求适配器， 它是基于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();
});

在 nodejs 中使用 GlobalFetch 时，nodejs 版本要求v17.5，或者你可以使用axios 请求适配器。

deno

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

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

GET 请求

通过 alovaInstance.Get 发送一个请求，由于使用了GlobalFetch请求适配器，将会接收到一个Response实例，这很简单。

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

在异步函数中，你也可以使用await alovaInstance.Get等待响应。

POST 请求

通过 alovaInstance.Post提交数据，这同样很简单。

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

接下来要做什么？

实际上，这只是一个最简单的请求示例，在接下来的章节中将会了解更多功能，让我们开始学习吧。