javascript - 为什么长度返回 0 但控制台显示为数组？

Question

在 facebook SDK 中检索 $fb->get('/me/accounts') 的数组列表后，我使用此函数检索和打印帐户的价值。

function recuperarCordeis(){
    var contas = [];
    $.get( "/configuracao/listar_contas", function( data ) {

        for (i = 0; i < data.length; i++) {
                if(Array.isArray(data[i])){
                    obj =data[i];
                    for (x = 0; x < obj.length; x++) {
                        contas.push(obj[x]);
                    }
                }else{
                    console.log('não');
                }

          }
      });

     var html = "";

            for(y = 0; y < contas.length; y++){
            conta = contas[y];
            console.log(conta.provedor_id);
            html += `<div class="img-contas mb-1 ativo">
                <a href="#" class="link-contas">
                    <img src="`+ conta.imagem_avatar +`" class="avatar-contas rounded-circle" />
                    <img src="/images/`+ conta.provedor +`_`+ conta.tipo +`.png" class="img-contas" />
                </a>
                <span>`+conta.nome +`</span>
            </div>
            `;
            }

            alert(html);
            $("#cordeis").html(html);
}

但是 contas 变量长度的第二个代码是空的。但是它的 console.log 显示了一个对象数组。

Answer 1

JS 是异步的，这意味着在$.get(...)获取数据时，它下面的代码会被执行。所以。您可以使用async and await此处等到实际获取数据。

async function recuperarCordeis(){
    var contas = [];
    await $.get( "/configuracao/listar_contas", function( data ) {

        for (i = 0; i < data.length; i++) {
                if(Array.isArray(data[i])){
                    obj =data[i];
                    for (x = 0; x < obj.length; x++) {
                        contas.push(obj[x]);
                    }
                }else{
                    console.log('não');
                }

          }
      });

     var html = "";

            for(y = 0; y < contas.length; y++){
            conta = contas[y];
            console.log(conta.provedor_id);
            html += `<div class="img-contas mb-1 ativo">
                <a href="#" class="link-contas">
                    <img src="`+ conta.imagem_avatar +`" class="avatar-contas rounded-circle" />
                    <img src="/images/`+ conta.provedor +`_`+ conta.tipo +`.png" class="img-contas" />
                </a>
                <span>`+conta.nome +`</span>
            </div>
            `;
            }

            alert(html);
            $("#cordeis").html(html);
}