Vue错误04：表格渲染某条“组合数据”失败

问题描述

今天在做管理系统项目的时候，遇到一个奇怪的问题。我的组合数据不显示：
效果图01：

控制台打印的数据如下：
调试图01：

正如图上所示，数据是打印出来了，但是表格没有渲染。

问题分析

我的数据表分为两个：
student–储存现有学生信息表（导入的资源，只可修改用于标注是否被注册的状态栏register）
user–储存当前系统用户表（包括管理员在内）。下面是部分数据展示：


所以我需要展示的tableData是一个组合数据，正如调试图01，所示。需要从两张表依次查询。我的做法是下面这样的：

//初始化列表
    showInfo() {
      //当页面被加载，发送请求，获取表单数据
      //第一次请求，获取当前用户表信息
      this.axios.post(this.base_url + "/home/info", {//回调函数1
        tableName: 'user'
      }).then((res) => {
        console.log("res:",res.data);
        //第二次请求，查询学生信息表，将名称整合到表格数据
        let temp = [];//用于暂存数据
        for(let i=0;i<res.data.length;i++){
          //当用户学号信息不为空，则发送请求
          if(res.data[i].studentId!=null){
            this.axios.post(this.base_url+"/home/search",{//回调函数2
              tableName:'student',data:{studentId:res.data[i].studentId}})
            .then((response)=>{
              console.log(response);
              let obj = {};//用于暂存每条数据对象
              obj = res.data[i];
              obj.name = response.data[0].name;//组合数据
              temp[i] = obj;
            })
          }else{
            temp[i] = res.data[i];
          }
          if(i==res.data.length-1){
            this.tableData = temp;//处理完成后，给tableData赋值
          }
        }
      }).catch((err) => {
        if (err) throw err
      });
    },

问题解决

由于JavaScript的运行机制（参照：JavaScript-运行机制详解），回调函数会被放在任务队列，最后执行。这也是为什么—调试图01—的tableData会有empty*12。应该把判断和赋值都放在–回调函数2–里面。附上代码：

 //初始化列表
    showInfo() {
      //当页面被加载，发送请求，获取表单数据
      //第一次请求，获取当前用户表信息
      this.axios.post(this.base_url + "/home/info", {
        tableName: 'user'
      }).then((res) => {
        console.log("res:",res.data);
        //第二次请求，查询学生信息表，将名称整合到表格数据
        let temp = [];
        for(let i=0;i<res.data.length;i++){
            this.axios.post(this.base_url+"/home/search",{
              tableName:'student',data:{studentId:res.data[i].studentId}})//当学生账号为空时，查询到的结果也是空
            .then((response)=>{
              console.log(response);
              let obj = {};
              obj = res.data[i];
              if(response.data.length==0){
                obj.name = ''
              }else{
                obj.name = response.data[0].name;
              }temp[i] = obj;
              if(i==res.data.length-1){
                console.log("temp:",temp);
                this.tableData = temp;
                console.log("tableData:",this.tableData);
              }
            })
        }
      }).catch((err) => {
        if (err) throw err
      });
    },

后台的运行结果：
调试图02：

前台浏览器调试：
调试图03：

完美解决问题！
效果图02：

总结：
请各位一定记住JavaScript的运行机制是单线程！所有的回调函数都会被放在任务队列，在主函数运行完后，再执行！
请各位一定记住JavaScript的运行机制是单线程！所有的回调函数都会被放在任务队列，在主函数运行完后，再执行！
请各位一定记住JavaScript的运行机制是单线程！所有的回调函数都会被放在任务队列，在主函数运行完后，再执行！