当前位置：首页 > news >正文

alova.js快速入门教程

news 2025/7/19 18:17:34

官网地址：Alova.JS - Lightweight request strategy library | Alova.JS

一、alova 是什么？

二、快速入门

1、安装依赖

（1）使用npm方式安装

（2）使用yarn方式安装

2、在静态 html 中使用

一、alova 是什么？

alova 是一个轻量级的请求策略库，针对不同请求场景使用对应的请求模块，让开发者使用非常少量的代码就可以实现高可用性和高流畅性的请求功能，这意味着，你再也不需要自己绞尽脑汁编写请求优化代码，再也不需要自己维护请求数据和相关状态，你只需要选择并使用请求模块，设置参数后，alova 帮你搞定。从而提升开发效率、应用运行效率，还能降低服务端压力。

二、快速入门

1、安装依赖

（1）使用npm方式安装

npm install alova --save

（2）使用yarn方式安装

yarn add alova

tips:alova 结合 UI 框架，让请求变得更简单，你可以使用 alova 提供的use hook发起请求，它将返回例如loading等多个请求相关的状态化数据，并在 alova 中自动管理它们，而无需自己维护。

使用 alova 时，请确保 UI 框架符合以下版本要求：

React: >= v16.8
Vue: 2.7、3.x
Svelte: 任意

2、在静态 html 中使用

<!DOCTYPE html>
<html lang="en"><head><script src="https://unpkg.com/alova/dist/alova.umd.min.js"></script><script src="https://unpkg.com/alova/dist/adapter/globalfetch.umd.min.js"></script><script src="https://unpkg.com/vue@3/dist/vue.global.js"></script><!-- vuehook依赖 vue，因此需先引入 vue --><script src="https://unpkg.com/alova/dist/hooks/vuehook.umd.min.js"></script><script>const alovaInstance = window.alova.createAlova({baseURL: 'https://api.alovajs.org',statesHook: window.VueHook,requestAdapter: window.GlobalFetch()});// ...</script></head><body><!-- ... --></body>
</html>