同步异步API函数以在Builder中使用链命令

如何解决同步异步API函数以在Builder中使用链命令

我在同步执行异步代码时遇到问题。

这是API的功能，它将把加载的元素作为参数传递给回调。

function loadElement(url,onLoadedCallback)

我有一个Builder类，应该接收该元素，然后在加载后更改其属性。

class Builder {
    constructor() {
        this.element = {};
    }

    load(url) {
        loadElement(url,(element) => {this.element = element});
        return this;
    }

    build() {
        return this.element;
    }
}

但是当我这样使用Builder时，返回的元素将保留为空对象。

var element1 = new Builder().load('testUrl').build();
console.log(element1);

结果是{}，这是我所期望的，因为该元素需要大约3秒钟的加载时间，并且console.log(element1)会立即运行...

我需要的是一种重新同步异步回调的方法，以确保当我在构建器上调用this.element时，构建器链彼此依次执行并且.build()不等于空对象。

我的主要问题是我无法更改API的load函数以返回Promise，这将是最好的解决方案。

我希望有人可以帮助我解决这个问题。

解决方法

不可能使异步任务变得同步。虽然您无法更改load()方法来返回承诺，但可以使构建器包装元素的承诺并让build()返回承诺：

class Builder {
    constructor() {
        this.elementPromise = Promise.resolve({});
    }

    load(url) {
        this.elementPromise = new Promise(resolve => {
            loadElement(url,resolve);
        });
        return this;
    }

    build() {
        return this.elementPromise;
    }
}

用法是

const element1 = await new Builder().load('testUrl').build();
//               ^^^^^
console.log(element1);

或

new Builder().load('testUrl').build().then(console.log);

,

class Builder {
constructor() {
    this.element = {};
}

load(url) {
    loadElement(url,(element) => {this.element = element;return this;});
    
}

build() {
    return this.element;
}

}

将return语句移到loadElement的回调函数中