Vue3在axios中控制loading

背景

以往在请求接口时，常用的写法是在请求前打开loading状态，请求接口完后再去设置loading的状下面以局部loading + element形式实现态为false，繁琐的代码，需要频繁的手动去更改loading的状态。

const loading = ref(false);
const getList = async () => {
	try {
		loading.value = true; // 打开loading状态
		await getDiscountTempList(); // 请求接口
	} catch (error) {
		console.log(error);
	} finally {
		loading.value = false; // 关闭loading状态
	}
};

结合axios控制loading的展示与取消

下面以局部loading + element形式实现

主要的思路就是，把loading当作一个配置项传递给api，在axios的请求拦截器中展示loading，在axios的响应拦截器中取消loading。但是注意loading一定要传入一个ref类的值。

/**
* @description 请求拦截器
*/
this.service.interceptors.request.use(
    (config: any) => {
        config.partLoading && (config.partLoading.value = true);
    },
    (error: AxiosError) => {
        return Promise.reject(error);
    }
);

/**
* @description 响应拦截器
*/
this.service.interceptors.response.use(
    (response: any) => {
        // 处理按钮loading 为关闭
        if(response.config.partLoading) {
            response.config.partLoading.value = false
        }
    },
    async (error: any) => {
        //AxiosError
        const { response } = error;
        if (error.config && error.config.partLoading) {
            error.config.partLoading.value = false;
        }
    }
);

<template>
	<div v-loading="partLoading" :element-loading-svg="svgStyle" :element-loading-svg-view-box="loadingSvgViewBox">
		<div>....内容</div>
	</div>
</template>

<script lang="ts" setup>
import { ref, onMounted } from "vue";
import { ICIDR } from "@/api/interface/sale";
import { ApiCidr } from "@/api/modules/sale";
import { svgStyle, loadingSvgViewBox } from "@/config/serviceLoading";

// 获取详情
const dataSource = ref<ICIDR.ResDetail>();
const partLoading = ref(false); // 局部loading
const getDetail = async () => {
	const uuid = route.query.uuid as string;
    // 把局部loading传入接口api
	const { data } = await ApiCidr.getDetail({ uuid }, { partLoading });
	dataSource.value = data;
};

onMounted(() => {
	getDetail();
});

</script>

通过以上的思路，还可以去拓展实现全局的，按钮的loading...

～～END～～