Element-ui disables global loading

background

Two days ago, WHEN I was developing a management background project, I encountered a problem. The back-end interface returned very slowly. Because the interface called a third-party API, it could not be processed by the back-end. At this time, I thought of using loading animation, but it also caused a lot of problems. I will record it here for you to learn from such problems.

Treatment scheme

Add loading to the table

      <el-table
        v-loading="loading"
        :data="tableData"
        border
        tooltip-effect="dark"
        :row-class-name="tableRowClassName"
        style="margin-top: 20px"
      >
      ...
      </el-table>
Copy the code

To do this, set loading to true before the request starts and false after it ends. There is a detailed overview on Element’s website, but I won’t cover it here.

Add an animation to the global content container

The first method is simple, but the UI doesn’t look great after development, so consider loading your content container. Loading as a service is used.

However, there are also some problems in this case. First, after the request starts, it immediately switches to another page, and the global loading is still displayed.

In addition, switching back to the page will send a request again, and the loading display location is abnormal. Switching routes is to cancel requests and loading, and we need to listen for the life of the component route. Cancel this request when leaving this route.

The specific code is as follows:

Leaving the route life cycle

  beforeRouteLeave(to, from, next) {
    // called when navigating away from the component's corresponding route
    // Access component instance 'this'
    this.source.cancel("Leave this page to cancel the request"); next(); },...Copy the code

Request events

    getTable() {
      const CancelToken = axios.CancelToken;
      this.source = CancelToken.source();
      const options = {
        target: ".el-main".text: "Loading like mad...".spinner: "el-icon-loading".lock: true.background: "Rgba (255255255,0.4)"};const loadingInstance = this.$loading(options);
      this.axios
        .post(
          "* * *",
          qs.stringify({
            name: this.q,
            page: this.listQuery.page,
          }),
          {
            cancelToken: this.source.token,
          }
        )
        .then((res) = > {
          this.tableData = res.data.data;
          this.$nextTick(() = > {
            // Loading called as a service needs to be turned off asynchronously
            loadingInstance.close();
          });
        })
        .catch((thrown) = > {
          // If the request is cancelled, enter this method
          if (axios.isCancel(thrown)) {
            console.log("Request canceled", thrown.message);
            this.$nextTick(() = > {
              // Loading called as a service needs to be turned off asynchronously
              loadingInstance.close();
            });
          } else {
            // handle error}}); },Copy the code

Cancel the request while leaving the page and turn off the loading animation.

feeling

This time in order to pursue a better user experience, so also took a lot of detours, but I think it is still very meaningful. I also learned a lot of new things, such as how to cancel a request. It was very fruitful.