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 = 5000export 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';// 定义异步函数handleGetasync function handleGet() {const response = await getDemo();}// 定义异步函数handlePostasync 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,});}// 定义异步函数handleDeleteasync function handleDelete() {const response = await deleteDemo();}
</script>