When a page requests an interface, we usually add a loading state. If there are multiple requests and the loading state ends when all requests end, what will you do? Do I add promise, await, promise. All one by one at the page level? It works, but it’s too complicated. Here I will show you how global encapsulation can be used in the AXIos configuration file to accommodate the start and end of multiple requests for loading and to control whether or not the interface needs to be loaded.

Here I use the VUe3 project as an example. Other frameworks are pretty much the same, with the same approach.

Set the vuex global variable loading

We first need a global variable that controls the start and end of loading. Here I use vuex

/src/store/modules/common.ts

import { Module } from "vuex"; import { State as RootState } from ".. /index"; export interface State { loading: boolean; } const state = { loading: false }; const mutations = { setLoading(state, flag: boolean) { state.loading = flag; }}; export default { namespaced: true, state, mutations, } as Module<State, RootState>;Copy the code

Do a global loading animation in app. vue

The loading animation should be absolutely positioned. If it is a skeleton page, it needs to be written in layout pages. Here, I used the Spin component of Ant-Design to do the loading animation effect. The loading variable of VUex was used to control the display

<template> <div class="spin-loading-container" v-if="$store.state.common.loading"> <a-spin></a-spin> </div> <router-view  /> </template> <style lang="less"> .spin-loading-container { position: absolute; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; z-index: 999; Background-color: rgba(255, 255, 255, 0.4); } </style>Copy the code

In Request. ts, the start and end of loading are controlled by request start and end states

If reqNum is set to 0, the loading state ends. If reqNum is set to 0, the loading state ends. A delay of 300ms can be added to merge synchronous requests.

The loading variable passed in determines whether to start loaidng

/src/config/request.ts

Import {store} from "@/store/index"; import {store} from "@/store/index"; let reqNum = 0; const startLoading = () => { if (reqNum === 0) { store.commit("common/setLoading", true); } reqNum++; }; Const endLoading = () => {// merge setTimeout(closeLoading, 300); }; const closeLoading = () => { if (reqNum <= 0) return; reqNum--; if (reqNum === 0) { store.commit("common/setLoading", false); }}; const request = (options: AxiosRequestConfig = {}, loading = false) => {// if loading is true, startLoading && startLoading(); return new Promise<ApiResult>((resolve, reject) => { instance(options) .then((response: AxiosResponse) => {// endLoading endLoading(); }). Catch ((result) => {// endLoading endLoading(); }); }); };Copy the code

Set the request interface in the API file, as well as the method of passing parameters

Note the location of loading parameters. When the method is called later, the loading parameter is passed to determine whether to load. By default, no loading is required

/src/api/apiTest.ts

export const requestTest1 = (data: object, loading = false) => {
  return request(
    {
      url: "/mock/getUser",
      method: "GET",
      data,
    },
    loading
  );
};

export const requestTest2 = (data: object, loading = false) => {
  return request(
    {
      url: "/mock/getUser",
      method: "GET",
      data,
    },
    loading
  );
};
Copy the code

Use it on the page

/src/views/Home.vue

</a-button> </template> import {requestTest1, </a-button> </template> requestTest2 } from "@/api/apiTest"; Const clickAllLoading = () => {requestTest1({}, true).then((res) => {console.log(" Request 1 completed ",res); }); RequestTest2 ({}, true).then((res) => {console.log(" Request 2 completed ",res); }); };Copy the code

Click run Result

Conclusion: Global variables can be used to control the display and hiding of loading, global loading animation can be set, the loading control of multiple requests can be realized by controlling the number of requests in the request encapsulation file, and the need for loading can be controlled by passing parameters in the API file. After this is done, you only need to pass the parameter true to the interface of the API file to receive. It is no longer necessary to write multiple requests one by one at the page level. The most important thing is to merge the requests by the number of requests

Project code address