alova详解，对比axios，alova的具体使用

参考：alova官方文档

alova是什么

alova 是一个轻量级的请求策略库，简单来说就是可以通过它发送HTTP请求给服务器。

对比axios

1. 轻量： alova 很轻量，体积只有 axios 的 30%+。
2. 数据缓存： alova 分别提供了 3 种缓存模式来满足不同的缓存场景，分别为内存模式、缓存占位模式、恢复模式。它们是组件无关的，只要请求地址和参数相同都可以命中缓存，除非你关闭了它。响应数据缓存可以极大地提高请求流畅性，降低服务端压力。

• 内存模式： 将响应数据缓存在本地内存中，适用于需要频繁访问且数据变化不频繁的场景。当请求/todo?id=1时，响应数据会被缓存5秒。在这5秒内，再次发起相同的请求将直接从缓存中获取数据，而不需要再次发送请求到服务器。
• 缓存占位模式： 在首次请求时会立即返回一个占位符，然后在后台异步加载数据，适用于需要快速响应用户操作的场景。首次请求/todo?id=1时，会立即返回Loading…作为占位符，同时在后台异步加载数据。如果数据在10秒内再次被请求，将直接从缓存中获取，而不需要再次显示占位符。
• 恢复模式：在数据加载失败时，自动从缓存中恢复数据，适用于需要保证数据一致性的场景。如果请求/todo?id=1失败，alova会自动从缓存中恢复数据。缓存中的数据会被保留30秒，在此期间，即使再次发起请求失败，也可以从缓存中获取数据。

3. 请求共享： 请求共享在同时发送多个相同请求时，将会复用同一个请求，它也可以提升应用流畅性和降低服务端压力。
4. 并发请求：axios需要使用Promise.all()来同时发出多个请求，而alova则支持使用并发请求。
5. 开箱即用的高性能请求策略： alova提供了多个高性能的请求策略模块，可以根据不同请求场景使用不同的模块。
6. 数据预拉取： alova支持数据预拉取，提前请求将要使用的数据，提升应用流畅性。
7. 请求状态管理： 仅使用 axios 时，通常需要你自行维护请求相关状态，使用 alova 的 use hook 后可以获得自动化的请求状态管理能力。

具体使用

1. 安装

npm install alova --save

2. 创建 alova 实例

1. 新建alova文件夹，在此目录下新建index.js/index.ts

import { createAlova } from 'alova';
// v2.0
// import GlobalFetch from 'alova/GlobalFetch';
// v3.0
import adapterFetch from 'alova/fetch';
import VueHook from 'alova/vue'

export const alovaInstance = createAlova({
  // 假设我们需要与这个域名的服务器交互
  baseURL: 'http://jsonplaceholder.typicode.com',
  // 将 alova 库与 Vue.js 框架集成，使得 alova 可以管理 Vue 组件的状态
  statesHook: VueHook,
  // 请求适配器，这里我们使用fetch请求适配器
  requestAdapter: adapterFetch(),
  // 设置全局的请求拦截器，与axios相似
  beforeRequest() {},
  // 响应拦截器，也与axios类似
  responded: {
      onSuccess: async (response) => {
        const json = await response.json()
        // 根据后端约定，判断code值抛出对应的问题
        if (json.code === 1) {
          return json.data
        } else {
          console.log(json.msg)
          throw new Error(json.msg)
        }
      },
      // 抛出错误时，将会进入请求失败拦截器内
      onError(error) {
        throw new Error(error)
      }
    }
});

3. 在Vue组件中使用

<template>
    <div>
        <button @click="handleGet">get</button>
        <button @click="handlePost">post</button>
        <button @click="handlePut">put</button>
        <button @click="handleDelete">delete</button>
    </div>
</template>

<script lang="ts" setup>
    import { alovaInstance } from '../alova/index';

    // 定义异步函数handleGet
    async function handleGet() {
        const response = await alovaInstance.Get('/posts');
    }

    // 定义异步函数handlePost
    async function handlePost() {
        const response = await alovaInstance.Post('/posts',{
            title: 'foo',
            body: 'bar',
            userId: 1,
        });
    }

    // 定义异步函数handlePut    
    async function handlePut() {
        const response = await alovaInstance.Put('/posts/1',{ 
            id: 1,
            title: 'foo1',
            body: 'bar1',
            userId: 1,
        });
    }

    // 定义异步函数handleDelete
    async function handleDelete() {
        const response = await alovaInstance.Delete('/posts/1');
    }
</script>