Javascript 在执行任何其他操作之前，请等待方法任务完成

我有一个类，有方法。。。其中一个实际上包含获取svg文件的获取。那里没有什么特别的东西。 问题其实不在课堂上，而是在使用它的时候

我有一个方法getDataFromFile（url），我把我的SVG url传递给它，它会做很多事情。问题是。。。当我使用它时，如果我在它后面调用另一个方法，或者甚至只是一个控制台.log。。。由于它还没有生成文件，我得到了“未定义”的位置，它应该显示一个对象

当然，如果我设置了一个超时，它会工作，但这意味着它之后的一切都必须在一个超时中。。。我也可以很好地在之后调用的方法中设置一个超时，但是这个方法也会变成异步的

我尝试过很多事情，但我并没有得到承诺和类似的东西，所以。。。我完全被困在那里了

这是我的代码的一个（非常）简化版本，我知道它远不是最优的（我是一个乞丐），但无论如何，它是这样的：

var ParentClass = function ()
{
    // Attributes and stuff

    this.paths = [];
}


var MyClass = function ()
{
    ParentClass.call( this );
}


MyClass.prototype.getInlineDOMdata = function ( selector )
{
    // Stuff going on...

    let querySelector = document.querySelectorAll( selector + " path" );

    for ( let i = 0; i < querySelector.length; i++ )
    {
        this.paths.push(
            {
                name: querySelector[ i ].id,
                color: querySelector[ i ].style.fill,
                pathData: querySelector[ i ].attributes.d.value
            }
        );
    }

}


MyClass.prototype.getInlineData = function ( inlineCode )
{
    let domTarget = document.querySelector( "body" );

    domTarget.innerHTML += `<div class="placeholder">${ inlineCode }<div>`;

    let domContainer = document.querySelector( ".placeholder" );

    // Stuff going on...

    this.getInlineDOMdata( ".placeholder svg" );

    domContainer.remove();
}


MyClass.prototype.getDataFromFile = function ( url )
{
    fetch( url )
        .then( response => response.text() )
        .then( data => this.getInlineData( data ));
}

和程序端，在我的

loadComplete

函数前面添加

async

，在我的

test.getDataFromFile（“urlToSvg.svg”）前面添加
wait
行解决了我的问题

感谢Leftium提供的伟大的Tutrial（），这让我终于明白了承诺是如何起作用的。这些关键字基本上是承诺的语法糖，因此理解承诺如何工作将非常有帮助

这是一个很好的示例，它使用Promissions遍历异步示例，然后将其转换为async/await语法。相关引用：

好消息是JavaScript允许您编写
描述异步计算的伪同步代码。异步的
函数是一个隐式返回承诺的函数，
在它的体内，以一种看起来同步的方式等待其他承诺


在异步函数中，单词await可以放在
表达式等待承诺解决，然后才继续
函数的执行

这样的函数不再像常规JavaScript函数那样运行
从开始到完成，一气呵成。相反，它可以随时冻结
有等待的点，可以稍后恢复

我不知道为什么承诺和异步概念总是用太多的东西来解释，这使得它们比实际更复杂。。。幸运的是，这篇教程很容易理解，对我帮助很大，谢谢！我终于让它完全按照我想要的那样工作了！只需在getDataFromFile方法中更改几句话，就完全解决了我的问题，再次感谢！
document.addEventListener( "DOMContentLoaded", loadComplete );

function loadComplete ()
{
    var test = new MyClass();
    test.getInlineData( `
     <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 195 82">
             <!--Some SVG code -->
     </svg>
      ` );
     console.log( test.paths[ 0 ] ); // Object { name... }
     console.log( test.paths.length ); // 4


    test.getInlineDOMdata( "svg" );
    console.log( test.paths[ 0 ] ); // Object { name... }
    console.log( test.paths.length ); // 4  */

    test.getDataFromFile( "https://upload.wikimedia.org/wikipedia/en/c/ce/SVG-logo.svg" );
    console.log( test.paths[ 0 ] ); // undefined
    console.log( test.paths.length ); // 0

    setTimeout( function ()
    {
        console.log( test.paths[ 0 ] ); // Object { name... }  
        console.log( test.paths.length ); // 4
    }, 1000 );
}

MyClass.prototype.getDataFromFile = async function ( url )
{
    let response = await fetch( url )
        .then( response => response.text() );

    await this.getInlineData( response );
}