在Vue3里Vant4的showLoadingToast使用在Axios请求拦截器结束于响应拦截器

全网找了许久没找到解决办法，或许是有但我没找到

Vant4官方文档我个人是感觉不是很全很清晰，另一个SwipeCell滑动单元格也有奇葩的问题（包裹的自定义内容只有上下可以顺畅滑动，中间部分多层v-for就一卡一卡的），我也暂时还没解决

明确需求：在请求api时显示无限loading或者loading几秒，在请求超时或者请求完成时关闭loading

解决的关键在于Vue3的ref const loading = ref(null) 代码如下，在request.js中

import axios from 'axios'
import { ref } from 'vue'
import { allowMultipleToast, showFailToast, showLoadingToast } from 'vant'

const instance = axios.create({
    baseURL: 'http://192.168.1.100:8088/api/v1',
    timeout: 5000
})

allowMultipleToast() // 允许多个toast
const loading = ref(null)
// 添加请求拦截器
instance.interceptors.request.use(
    function (config) {
        // 在发送请求之前做些什么
        loading.value = showLoadingToast({
            message: '加载中...',
            forbidClick: true,
            loadingType: 'spinner',
            duration: 0 // 默认是2s，0就是无限
        })
        return config
    },
    function (error) {
        return Promise.reject(error)
    }
)
// 添加响应拦截器
instance.interceptors.response.use(
    function (response) {
        loading.value.close() // 点睛之笔，这里关掉后不影响后面的新toast
        return response
    },
    function (error) {
        showFailToast('出现错误，请稍后再试')
        return Promise.reject(error)
    }
)