问题&回答

此处列举一下常见问题，采用层层递进的方式讲解，不要急。

接口不展示全局请求动画

小娟：我这是一个element-ui的表格，获取这个列表的接口不需要展示全局请求动画的，因为这个表格本身有加载动画。

小布：好的，你的需求我明白了，你可以在接口配置那边配置一个noShowLoading: true，这样接口就不会展示全局请求动画了。

小娟：好的，谢谢布哥。

取消请求不关闭加载动画

小娟：对了，布哥，还有一个问题，就是这个获取列表的接口，我配置了重复请求时，取消前面的重复请求，但是我重复点击时是会取消前面的请求，但是我的加载动画却早早被关闭了耶。我的代码是这样的：

getList() {
  this.loading = true
  dictApi
    .getList(this.addDateRange(this.queryParams, this.dateRange))
    .then((response) => {
      this.list = response.rows
      this.total = response.total
      this.loading = false
    })
    .catch((err) => {
      this.loading = false
    })
},

小布：好的,小娟，小问题，这个是因为取消请求也会执行catch，因此loading被提前赋值为false，导致loading没有显示，因此需要修改为如下代码，改完就ok了。

getList() {
  this.loading = true
  dictApi
    .getList(this.addDateRange(this.queryParams, this.dateRange))
    .then((response) => {
      this.list = response.rows
      this.total = response.total
      this.loading = false
    })
    .catch((err) => {
      if (err?.name === "CanceledError") {
        return
      }
      this.loading = false
    })
},

...过了几天

双加载动画问题

小娟：布哥啊，我刚进去页面时不止请求列表接口，还有请求一些搜索条件的字典接口，此时页面上又有两个加载动画了。

小布：好的，小娟，问题不大啊，让你好好去学CSS你不学，这个问题的本质其实就是让两个加载动画不要同时出现，那就是当全局请求动画出现时，el-table的加载动画隐藏，只有当全局请求动画消失的时候，el-table的加载动画才出现，这样就解决了双加载动画的问题了，下面手把手教你步骤吧。

直接在全局样式里添加一行：

.xiaobu-loading-mask.show  + .xiaobu-app-container .el-loading-mask{
  display: none;
}

小布：小娟啊，上述css类名仅供参考，具体项目还得看你具体项目的类名啊，我这个例子是我的全局加载动画有xiaobu-loading-mask类,显示的时候还会有一个show类，然后我是将这个加载动画组件是放在xiaobu-app-container容器前面的，因此我可以使用 + 这个符号来选择这个类，然后设置其el-loading-mask类的样式为display: none;，当全局加载动画隐藏时，这个css就失效，el-loading-mask类就自然而然的显示，希望你能举一反三，其他情况的时候能自己解决问题独当一面了。最后再来一句：“能用css解决的，就不要用js了。”

遍历请求同个接口，不知道哪个接口最后结束

小娟：布哥，我有一个上传图片的接口，一次只支持上传一张，因此当需要上传多张图片时，我需要遍历上传图片接口，直到所有图片都上传完成，我才能进行提交操作，同时上传的话，不知道哪个接口最后结束，如果使用await又会导致阻塞影响速度，使用Promise.all()的话，我又需要对每个接口响应进行一些操作，我该怎么办呢？

小布：小娟，你去看下文档中接口相关的配置，其中有一个配置叫做showIsComplete, 在你的上传图片接口配置一个showIsComplete为IS_COMPLETE，且不要配置阻止重复请求。这时上传图片接口就会多返回一个 IS_COMPLETE 的参数，这个参数为 true 表示全部接口已经完成，此时可以进行下一步操作，否则不进行下一步操作。切记配置的值不要与接口返回的值一样。

小娟： 懂了，3Q

设置接口缓存

小娟：布哥啊，我有一个详情页面，几乎不会怎么改变，我可以把他设置缓存吗？

小布：当然可以，你给该接口配置个cache:true即可, 切记表单提交、删除或数据会频繁变更的接口千万不要设置缓存哟。

设置唯一路径判断方式

小娟：布哥，我有个获取字典接口，明明是获取不同的字典类型的，但是前面的接口请求都被取消了，怎门办？

小布：小娟，给这个获取字典接口配置一个fullPath:true，这样同一请求的判定依据就会变为“同请求方式且同请求地址且同请求参数”

小娟：布哥，强，可以了

路由切换时，中断旧路由未响应接口

小娟：布哥，接口文档上的abortAllRequests怎么使用？

小布：在路由拦截中加入以下代码：

import axiosRequest from "@/api/axios-optimize"
async function beforeEach(to, from, next) {
  // 跳转别的页面才取消未响应的请求  会出现to就是from的情况
  if (to.name !== from.name) {
    axiosRequest.abortAllRequests()
  }
  ......
}

小娟: 我试了，没问题，nice

总结

常见问题及使用大概就是这样了，希望能帮助到你，免去写isLoading等判断的麻烦，也比什么防抖啥的更加完美，无漏洞。

vue-axios-optimize 欢迎您在vue+axios的项目上使用。