懒人版请求库alovajs教程3：Method实例alova 是一个轻量级的请求策略库，支持开发者使用声明式实现例如请求

alova 是什么

alova 是一个轻量级的请求策略库，支持开发者使用声明式实现例如请求共享、分页请求、表单提交、断点续传等各种较复杂的请求，让开发者使用非常少量的代码就可以实现高可用性和高流畅性的请求功能，这意味着，你再也不需要自己绞尽脑汁编写请求优化代码，再也不需要自己维护请求数据和相关状态，你只需要选择并使用请求模块，设置参数后，alova 帮你搞定。从而提升开发效率、应用运行效率，还能降低服务端压力。

在 alova 中，每个请求都对应一个 method 实例，它描述了一次请求的 url、请求头、请求参数，以及响应数据处理、缓存数据处理等请求行为参数。通过 method 实例，你可以在任意的 js 环境下感受到统一的使用体验，只需要非常少的改动就可以正常运行起来，同时 method 实例将请求参数和请求行为参数放在了一起，更便于 api 的管理，而不是分散在多个代码文件中。

创建实例

method 实例的创建也和 axios 的请求发送函数非常类似，你需要使用上一节中创建的 alova 实例来创建 method 实例，下面我们先来创建一个获取 todo 列表的 Method 实例。

// 创建一个Get实例，描述一次Get请求的信息
const todoListGetter = alovaInstance.Get('/todo/list', {
  // 请求头
  headers: {
    'Content-Type': 'application/json;charset=UTF-8'
  },
  // params参数将会以?的形式拼接在url后面
  params: {
    userId: 1
  }
});

接着再创建一个提交 todo 项的 POST 请求 Method 实例，此时第二个参数传入的是 request body。

// 创建Post实例
const createTodoPoster = alovaInstance.Post(
  '/todo/create',
  // 第二个参数是http body数据
  {
    title: 'test todo',
    time: '12:00'
  },
  // 第三个参数是请求配置相关信息
  {
    headers: {
      'Content-Type': 'application/json;charset=UTF-8'
    },
    params: {
      // ...
    }
  }
);

⚠️ 注意：Method实例里只是保存了请求所需要的信息，它不会发出请求，而是需要通过use hook发送请求（后续将详细讲解），或使用methodInstance.send发送请求，这点与axios不同。

设置请求级的超时时间

全局的请求超时时间作用于所有的Method实例，但很多时候我们需要根据特殊请求设置不同的超时时间，此时我们可以设置请求级的超时时间，它将覆盖全局的timeout参数

// 请求级别的请求超时时间
const todoListGetter = alovaInstance.Get('/todo/list', {
  // ...
  // highlight-start
  timeout: 10000
  // highlight-end
});

请求方法类型

Alova提供了包括 GET、POST、PUT、DELETE、HEAD、OPTIONS、PATCH 七种请求方法的抽象实例，具体的使用方式可以阅读请求方法详解。

请求行为参数

除了设置请求参数外，method实例还可以设置请求行为参数，以下是支持的请求行为参数，也将在后面的章节中详细讲解。

名称	描述
name	method 实例名称，它一般用于匹配 method 实例
transformData	设置响应数据转换函数，具体查看转换响应数据
localCache	设置请求级的缓存模式，具体查看缓存模式
enableDownload	启用下载进度信息，具体查看下载/上传进度
enableUpload	启用上传进度信息，具体查看下载/上传进度
hitSource	缓存自动失效设置，具体查看自动失效缓存
shareRequest	共享请求，具体查看共享请求

设置请求适配器支持的参数

在了解 alova 实例的章节中，我们内置并推荐了GlobalFetch作为 alova 的请求适配器，它内部将会通过fetch函数发送请求，此时你还可以在method实例上配置任何fetch支持的参数，但我们推荐使用上面提到的字段设置请求参数。

const todoListGetter = alovaInstance.Get('/todo/list', {
  // ...
  // highlight-start
  credentials: 'same-origin',
  referrerPolicy: 'no-referrer',
  mode: 'cors'
  // highlight-end
});

这很容易理解，即除了请求参数和请求行为参数等统一的参数外，你还可以设置请求适配器支持的任意参数。在扩展中，我们还提供了XMLHttpRequest 适配器、axios 适配器、Uniapp 适配器、Taro 适配器等，每个适配器也有它们支持的参数。

alovajs其他信息

为什么创造 alova

数据请求一直是应用程序必不可少的重要部分，自从 XMLHttpRequest 诞生以来请求方案层出不穷，客户端的数据交互探索一直聚焦于请求的简单性，如$.ajax、axios、fetch api以及react-query等请求工具，编码形式从回调函数、Promise，再到 usehook 不断发展，这些 js 库在请求简单性上已经做得很好了，不过它们只提供了通用的功能，这意味着对于不同的请求场景例如共享请求、分页请求、表单提交、上传和下载文件等，开发者依然需要自己编写复杂的代码，降低开发效率，性能也无法得到保证，在越来越看重的用户体验的时代，应用的流畅性变得越来越重要。

而我们认为还有更简单的方案，例如使用一个 use hook 实现对分页数据的获取和管理、实现对表单数据的管理、实现断点续传等，即在不同的请求场景下使用不同的请求策略模块来高效地实现请求功能，从而让开发者在编写更少量代码同时，也能实现更高效地 Client-Server 数据交互，这就是我们提出的解决方案，也是 alova 的使命。

为什么使用alova

alova 也致力于解决客户端网络请求的问题，但与其他请求库不同的是，alova 选择了业务场景化请求策略的方向，它配合axios/fetch api等请求库后能满足你绝大部分请求需求（99%）的同时，还提供了丰富的高级功能。

你可能曾经也在思考着应该封装fetch和axios，现在你不再需要这么做了，通过 alova 使用声明的方式完成请求，例如请求共享、分页请求、表单提交、断点上传等各种较复杂的请求，以及自动化缓存管理、请求共享、跨组件更新状态等。
alova 是轻量级的，只有 4kb+，是 axios 的 30%+。
目前支持vue/react/react-native/svelte，以及next/nuxt/sveltekit等 SSR 框架，同时也支持Uniapp/Taro多端统一框架。
alova 是低耦合的，你可以通过不同的适配器让 alova 在任何 js 环境下，与任何 UI 框架协作使用（内置支持的 UI 框架为vue/react/svelte），并且提供了统一的使用体验和完美的代码迁移。
使用 alova 还能实现 api 代码的高聚合组织方式，每个 api 的请求参数、缓存行为、响应数据转换等都将聚集在相同的代码块中，这对于管理大量的 api 有很大的优势。

与其他请求库的对比

多框架支持

现在，你还可以在 vue options（vue2 和 vue3）写法中完美使用 alova，点此查看详情。后续我们将陆续支持以下框架：

函数式，如solid/preact/qwik。
class 式，如angular/lit/stencil。
options 式，如原生小程序(中国🇨🇳)。

alovajs 还提供了其他强大的请求策略：

名称	描述	文档
分页请求策略	自动管理分页数据，数据预加载，减少不必要的数据刷新，流畅性提高 300%，编码难度降低 50%	usePagination
无感数据交互策略	全新的交互体验，提交即响应，大幅降低网络波动造成的影响，让你的应用在网络不稳定，甚至断网状态下依然可用	useSQRequest
表单提交策略	为表单提交而设计的 hook，通过此 hook 你可以很方便地实现表单草稿、多页面（多步骤）表单，除此以外还提供了表单重置等常用功能	useForm
文件上传策略	更简单的文件上传策略，支持对 base64、Blob、ArrayBuffer、Canvas 数据的自动识别和转换	useUploader
发送验证码	验证码发送 hook，减掉你在开发验证码发送功能时的繁琐。	useCaptcha
自动重新拉取数据	在一定条件下自动重新拉取数据，保证始终展示最新数据。	useAutoRequest
跨组件触发请求	一个 alova 中间件，消除组件层级的限制，在任意组件中快速地触发任意请求的操作函数	actionDelegationMiddleware
串行请求的 useRequest	比alova 的串行请求方式更加简洁易用的串行请求 use hook，提供统一的 loading 状态、error、回调函数	useSerialRequest
串行请求的 useWatcher	比alova 的串行请求方式更加简洁易用的串行请求 use hook，提供统一的 loading 状态、error、回调函数。	useSerialWatcher
请求重试策略	请求失败自动重试，它在重要的请求和轮询请求上发挥重要作用	useRetriableRequest
SSE 请求	通过 Server-sent Events 进行请求	useSSE

想学习更多 alovajs 的用法，欢迎来alova 官网学习。如果你也喜欢 alovajs，请在Github 仓库中贡献一颗 star，这对我们非常重要。

如果觉得文章对你有帮助，请别吝啬你的赞和评论哈，说说你对 alovajs 怎么看的，或者可以问一些问题，我会尽量回答的，你的支持是我创作的最大动力！哈哈哈哈哈哈~

欢迎加入交流社区

有任何问题，你可以加入以下群聊咨询，也可以在github 仓库中发布 Discussions，如果遇到问题，也请在github 的 issues中提交，我们会在最快的时间解决。

同时也欢迎贡献你的一份力量，请移步贡献指南。

懒人版请求库alovajs教程3：Method实例