同步异步 API 函数以在构建器中使用（链命令）

Question

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

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

function loadElement(url, onLoadedCallback)

我有一个生成器 class，它应该接收元素，然后在加载元素后更改其属性。

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

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

    build() {
        return this.element;
    }
}

但是当我像这样使用 Builder 时，returned 元素仍然是一个空对象。

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

结果是 {}，这是我意料之中的，因为该元素需要大约 3 秒才能加载，而 console.log(element1) 会立即运行...

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

我的主要问题是我无法将 API 的加载函数更改为 return Promise，这将是最好的解决方案。

希望有人能帮我解决这个问题。

Answer 1

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

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

build() {
    return this.element;
}

}

将return语句移动到loadElement

的回调函数中

Answer 2

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

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);

同步异步 API 函数以在构建器中使用（链命令）

Synchronize an asynchronous API function for use in a Builder (Chain Commands)

javascript

asynchronous

callback

promise