axios解决异步接口调用延迟问题，用axios.all搭配axios.spread同时请求两个异步请求

项目场景：

知识产权模块标题和数量同时显示

---

问题描述

标题和对应数量接口样式显示稍有延迟，影响视觉效果

---

原因分析：

接口调用的先后造成轻微延迟

---

解决方案：

方案一：created()中先后顺序调换

  created() {
  	this.getNumber()
    this.getTitle()
  }
  methods: {
    // 获取导航列表
    getTitle() {
   	 	// 具体操作
    }, 
    // 导航数量
    getNumber() {
       // 具体操作
     },
  },

方案二：用axios.all搭配axios.spread同时请求两个异步请求

1.先看项目中有没有axios,若没有先下载

npm install axios --save

2.在mina.js中引入axios，因为其不属于vue全家桶，所以将其挂载在window原型上，实现全局使用

main.js

//引入axios模块
import axios from 'axios'
//将axios挂载在window原型链上
Window.prototype.axios = axios

3.在所需组件中使用axios配合axios.all()、axios.spread()同时发送多个请求

propertyRight.vue

created() {
    // 测试axios.all
    var me = this
    axios
      .all([me.getTitle(), me.getNumber()])
      .then(
        axios.spread(function (getTitle, getNumber) {
        // getTitle, getNumber相当于各自的res
          if (getTitle.status == 'SUCCESS' && getNumber.code == '200') {
          // 接口一成功后的具体操作
            me.typeList = ['学术论文', '学位论文', '专利']
            me.typeList2 = [
              'Article',
              'Paper',
              'Patent'
            ]
            // 接口二成功后的具体操作
            me.navbarList = getNumber.data
            me.typeNum = me.typeList2.map((item) => me.navbarList[item])
            console.log(me.typeNum)
          }
        })
      )
      .catch((e) => {
        this.$message.error('数据错误,请重新请求！')
      })
  },
//在methods中定义请求方法，并return出去，不要写请求回调then()
methods: {
// 测试axios.all
    getTitle() {
      console.log('调用第一个接口')
      return axiosRest({
        url: `/rest/v2/find/getTitle`,
        method: 'post',
      })
    },
    getNumber() {
      console.log('调用第二个接口')
      return axiosRest({
        url: `/rest/v2/find/getAllSummary`,
        method: 'post',
      })
    },
}