希望能够在alovaInst.Post、alovaInst.Get....中定义中间件或者是在请求或者响应的时候做一些操作

[wwwylo]

需求场景如下：

• 在发送请求时自动显示loading条，或根据响应返回值进行操作，或在某些接口请求前附加参数。
• 如果使用创建多个实例的方式实现，会导致重复的代码，并且颗粒度太大。
• 如果使用useRequest的loading状态，在页面上也会导致大量的重复的代码。
• 如果在如果为useRequest单独包装一个方法的话，颗粒度也有些大，不能个性化选择每个接口的操作。
• 如果能在alovaInst.Post、alovaInst.Get等方法中定义中间件或处理请求响应的操作，那么只需要包装一个方法，且不影响useRequest、useWatcher、useFetcher的正常使用。这样在业务代码中更加灵活，可以根据需求为某个接口定制各种操作。

以下是我模拟我目前业务场景的代码

utils/request.ts 请求工具类

// alova实例
export const alovaInst = createAlova({
    baseURL: 'http://127.0.0.1:9501',
    statesHook: VueHook,
    requestAdapter: GlobalFetch(),
    responded(response) {
        return response.json();
    },
})

// 自己包装的defineApi方法，可以做一些自定义操作
export const defineApi = (options) => {
    return alovaInst.Post(options.url, options.body, {
        async middleware(_, next) {
            options.showLoading && showLoading(); // 根据需求是否自动显示loding弹窗
            const response = await next();
            options.showLoadin && closeLoading();

            if (options.autocomplete && response.code !== 200) { // 接口返回的状态是错误状态的话，自动开启一个Dialog
                showDialog(response.message);
                throw new Error(response.message)
            }

        }
    })
}

/api/user.ts 接口定义文件

export const login = (username:string,password:string) => defineApi({
    url: '/login',
    body: {
        username: username,
        password: password,
    },
    showLoading: true, // 这个接口我希望他自动显示loading弹窗
    autocomplete: false,
});
export const getUserinfo = (userid:number) => defineApi({
    url: '/getUserinfo',
    body: {
        userid: userid,
    },
    showLoading: true,
    autocomplete: true, // 这个接口我希望他服务端返回失败状态的时候自动弹出一个提示框
});

index.vue 页面业务代码

<template>
    <div>
        <div>
            昵称：{{ userinfo.nickname }}
        </div>
        <input v-model="username" type="text">
        <input v-model="password" type="password">
        <button @click="login">登录</button>
    </div>
</template>
<script setup lang="ts">
import { ref } from "vue";
import * as api from '@/api/user'
import { useRequest } from "alova";

const username = ref('');
const password = ref('')
const userid = ref(1)
const { data: userinfo } = useRequest(()=> api.getUserinfo(userid.value))

const login = async () => {

    useRequest(()=> api.login(username.value,password.value))
}

</script>

[JOU-amjs]

你可以直接在全局的beforeRequest和responded里处理加载状态的显示和隐藏就好了，如果需要通过showLoading 和autocomplete这些参数控制的话，可以使用method元数据来控制。