javascript - 在函数内等待/观察

Question

我无法理解这个问题。我怎样才能等待 i==2 完成然后再继续其他 i 的操作？

class Observable {
    constructor() {
        this.observers = [];
    }
    subscribe(f) {
        this.observers.push(f);
    }
    unsubscribe(f) {
        this.observers = this.observers.filter(subscriber => subscriber !== f);
    }
    notify(data, options) {
        this.observers.forEach(observer => observer(data));
    }
}

let myObserver = new Observable();

for (let i=0; i <= 2; i++){
    let proc = async function processor(foo) {
        console.log('Processing ' + i + ' ' + foo);

        if (i != 2){
            //await for i = 2 to finish
            //??? <----
        }

        // do other stuff which requires i = 2 
        await new Promise(r => setTimeout(r, i * 1000));
        console.log('Done ' + i);
    }

    myObserver.subscribe(proc);
}

myObserver.notify('Hello');

我添加了一个更具体的示例 - 可能会阐明我实际尝试完成的任务。 (使用与上面相同的Observable类)

let allData = {};

let dataProviders = {
    provderA: {
        url: 'http://provder.a.com',
        observer: new Observable(),
        requires: null
    },
    providerB: {
        url: 'http://provder.b.com',
        observer: new Observable(),
        requires: 'providerA'
    }
}

let consumers = {
    consumerX: {
        provider: 'providerA'
    },
    consumerY: {
        provider: 'providerB'
    },
    consumerZ: {
        provider: 'providerB'
    }
}

function getData(providerName) {
    let urlParam = '';

    if (dataProviders[providerName][requires] != null) {
        // (a)wait for providerA / dataProviders[providerName][requires]
        // ??? <----
        urlParam += allData[dataProviders[providerName][requires]]['parameter']
    }

    $.getJSON(dataProviders[providerName][url] + urlParam).done(function (result) {
        allData[providerName] = result;
        dataProviders[providerName][observer].notify(allData)
    });
}

for (const consumer of Object.keys(consumers)) {
    let subscription = function (data) {
        console.log('process data');
        console.log(data)
    }
    dataProviders[consumers[consumer]['provider']].subscribe(subscription);
}

for (const providerName of Object.keys(dataProviders)) {
    getData(providerName);
}

Answer 1

我怀疑你正在寻找

async function getData(providerName) {
    const { url, requires } = dataProviders[providerName];
    let urlParam = '';
    if (requires != null) {
        const requiredData = await new Promise(resolve => {
            dataProviders[requires].observer.subscribe(() => {
                resolve(allData[requires]);
            });
            // getData(requires); ???
        });
        urlParam += requiredData.parameter;
    }

    const result = await $.getJSON(url + urlParam);
    allData[providerName] = result;
    dataProviders[providerName][observer].notify(allData);
}

如果您没有用特定的结果而不是allData通知观察者，您可以简化resolver回调的订阅。但是，我想如果您不多次获取数据，您可以完全删除该 Observer 类，而只使用 Promise 来代替。这将允许您摆脱 allData 存储，只需记住 getData 返回的 promise ，从而大大简化整个代码:

const dataProviders = {
    provderA: {
        url: 'http://provder.a.com',
        promise: null,
        requires: null
    },
    providerB: {
        url: 'http://provder.b.com',
        promise: null,
        requires: 'providerA'
    }
};
function getDataOnce(providerName) {
    const provider = dataProviders[providerName];
    if (provider.promise == null)
        provider.promise = getData(provider);
    return provider.promise;
}
async function getData({ url, requires }) {
    let urlParam = '';
    if (requires != null) {
        const requiredData = await getDataOnce(requires);
        urlParam += requiredData.parameter;
    }

    const result = await $.getJSON(url + urlParam);
    return result;
}

const consumers = {
    consumerX: {
        provider: 'providerA'
    },
    consumerY: {
        provider: 'providerB'
    },
    consumerZ: {
        provider: 'providerB'
    }
};    
for (const consumer of Object.values(consumers)) {
    getDataOnce(consumer.provider).then(data =>
        console.log('process data');
        console.log(data)
    });
}