소사 24번: 트리 구성 요소가 불러올 때 로딩을 계속 표시하는 것에 대한 질문

오늘 elementui 트리 구성 요소가 불러오기를 게을리할 때, 노드가 너무 많으면 계속 불러오는 상태입니다. 문서를 보십시오. 코드는 다음과 같습니다.

loadNode(node, resolve) {
        if (node.level === 0) {
          return resolve([{ name: 'region' }]);
        }
        if (node.level > 1) return resolve([]);

        setTimeout(() => {
          const data = [{
            name: 'leaf',
            leaf: true
          }, {
            name: 'zone'
          }];

          resolve(data);
        }, 500);
      }

소스 코드를 보면 알 수 있듯이loadNode라는 함수는promise를 통해 봉인되기 때문에 반드시 Resovle로 되돌려야 한다. 그러나 나는 자신의 코드를 보고 자신이 이미 Resolve를 한 데이터를 발견했다. 다음과 같다.
 

    load(tree, treeNode, resolve) {
      api.getGroup(this.curTree.id, tree.id).then(res => {
        if (res.code == 0 && res.data.list) {
          resolve(this.resolveTableData(res.data.list)); 
        } else {
          resolve([]);
        }
      });
    },

 
분명히 문제의 원인은 ResolveTableData라는 함수 안에 있다. 그래서 나는 ResovleTableData라는 함수를 다시 봤다. 다음과 같다.

resolveTableData(arr) {
            arr.forEach(async item => {
                let appends = '&f_in_device_type=';
                this.inspectTypes.forEach(n => {
                    appends += n + ',';
                });
                appends = appends.substr(0, appends.length - 1); 
                let params = {
                    treeId: '&targetTree=' + this.curTree.id,
                    groupId: '&targetGroup=' + item.id,
                    'targetGroupRelation': '&targetGroupRelation=descendantsAndMe&just_count_total=true',
                    'appends': appends
                };
                await api.getDevNum(params).then(res => {
                    item.devNum = res.data.total;
                }); 
                item.leaf = !item.leaf; 
                item.attr.lsxjMaxThread = item.attr.lsxjMaxThread ? item.attr.lsxjMaxThread : 0;
            });
            return arr;
        },

위에서 두 번의 for 순환을 사용했습니다. 첫 번째는arr의 값을 얻기 위해서입니다. 두 번째는 for 순환이 매개 변수params를 가져와서 다음 함수에 연결해야 하기 때문입니다. 지난 에세이에서 왜 async await를 사용했는지 설명했기 때문에 지금은 설명하지 않겠습니다.
문제의 원인은 내가 추가한 async에 있다. 비동기 호출을 동기화로 바꾸었기 때문이다. 그러나 아래item.leaf = !item.leaf; 이 값은 비동기적입니다. 따라서 불러올 때 동기화된 두 함수가 불러오지 않으면 하위 구성 요소의loading이 되돌아오는 값을 얻을 수 있습니다.
load는 Resolve 이후에도 여전히!item.leaf의 상태입니다. 따라서: item.leaf = !item.leaf가 동기화 처리했습니다.

                setTimeout(() => {
                    item.leaf = !item.leaf;
                }, 100);

이러면 로딩 문제 없어요.