alova的二次封装

为什么要进行alova二次封装

上篇文章介绍了alova的基本使用方法：alova详解，对比axios，alova的具体使用，但是每次都要引入，还需要写请求路径，能不能只写一个方法就能发送请求呢，当然可以，因此在开发过程中，我们一般将alova进行二次封装进行请求。

二次封装的具体步骤

首先在src目录下新建alova文件夹，在此文件夹下新建index.js，api.js，service.js三个文件。

1. index.js

//index.js
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: '你的域名',
  statesHook: VueHook,
  // 请求适配器，这里我们使用fetch请求适配器
  requestAdapter: adapterFetch (),

  // 设置全局的请求拦截器，与axios相似
  beforeRequest() {},
  responded: {
  
     // 请求成功的拦截器
     // 当使用GlobalFetch请求适配器时，第一个参数接收Response对象
     // 第二个参数为当前请求的method实例，你可以用它同步请求前后的配置信息
     onSuccess: async (response, method) => {
       if (response.status >= 400) {
         throw new Error(response.statusText);
       }
       const json = await response.json();
       if (json.code !== 200) {
         // 抛出错误或返回reject状态的Promise实例时，此请求将抛出错误
         throw new Error(json.message);
       }
       // 解析的响应数据将传给method实例的transformData钩子函数，这些函数将在后续讲解
       return json.data;
     },

     // 请求失败的拦截器
     // 请求错误时将会进入该拦截器。
     // 第二个参数为当前请求的method实例，你可以用它同步请求前后的配置信息
     onError: (error, method) => {
       alert(error.message);
     },

     // 请求完成的拦截器
     // 当你需要在请求不论是成功、失败、还是命中缓存都需要执行的逻辑时，可以在创建alova实例时指定全局的`onComplete`拦截器，例如关闭请求 loading 状态。
     // 接收当前请求的method实例
     onComplete: async method => {
       // 处理请求完成逻辑
     }
}
});

2. api.js

// api.js
import { AlovaInstance } from './index'
// 请求头
const headers = { 'Content-Type': 'application/json;charset=UTF-8' }
// 请求超时时间
const timeout = 5000
 
export const Alova = {
    // 这是get请求
    createGet(url: string, params?: Record<string, any>) {
        return AlovaInstance.Get(url, {
        headers,
        params,
        localCache: {
            mode: 'placeholder', // 设置缓存模式为持久化占位模式
            expire: 60 * 10 * 1000 // 缓存时间
        },
        timeout
        })
    },
    // 这是post请求
    createPost(url: string, data: Record<string, any>, params?: Record<string, any>) {
        return AlovaInstance.Post(url, data, {
        headers,
        params
        })
    },
    // 这是put请求
    createPut(url: string, data: Record<string, any>, params?: Record<string, any>){
        return AlovaInstance.Put(url, data, {
            headers,
            params,
        });
    },
    // 这是delete请求
        createDelete(url: string, params?: Record<string, any>){
        return AlovaInstance.Delete(url, {
            headers,
            params,
        });
    },
}

3. service.js

// service.js
import { Alova } from './api'

// 封装 GET 请求
export function getDemo() {
    return Alova.createGet('/posts')
}
// 封装 POST 请求
export function postDemo(data) {
    return Alova.createPost('/posts', data);
}
// 封装 PUT 请求
export function putDemo(data) {
    return Alova.createPut('/posts/1', data);
}

// 封装 DELETE 请求
export function deleteDemo() {
    return Alova.createDelete('/posts/1');
}

4. 在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 { getDemo,postDemo,putDemo,deleteDemo } from '../alova/service';

    // 定义异步函数handleGet
    async function handleGet() {
        const response = await getDemo();
    }

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

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

    // 定义异步函数handleDelete
    async function handleDelete() {
        const response = await deleteDemo();
    }
</script>