javascript - promise 不互相等待

Question

因此，我对 promises 的理解使我相信我的其他 promise 会在我的 then 链中一个接一个地运行，但我在这里做错了。

我目前使用的代码如下

const mainPromise = () => Promise.resolve(
    console.log('spinner spinning...')
    ...spinner code.... //this is omitted code
);

const getData = () => Promise.resolve(
    someObj.getProducts('data.json')
);

const updateProduct = () => Promise.resolve(
    setTimeout(()=>{
        someObj.updateProductHTML()
    }, 0)
);

const updateDom = () => {
    setTimeout(()=>{
        someObj.updateDOM()
    }, 0)
};

还有我的 promise 链

mainPromise()
    .then(getData)
    .then(updateProduct)
    .then(updateDom)
;

它们最初似乎按顺序运行，但我在 getProducts 中的 Ajax 调用也有一个 for 循环 worker 来构建我的对象数组，并在我所有的 .thens 运行之后完成。

我试图至少在 updateProduct 和 updateDOM 运行之前让我的数据调用和 worker 完成

---更新---

好的，根据评论中的建议和 Samanime 的回答设置修改后的 promise

 const mainPromise = () => Promise.resolve(
    console.log('spinner spinning...')
);

const getData = () => new Promise( resolve => {
    console.log('getData');
        someObj.getProducts('data.json');
        resolve();
    }
);

const updateProduct = () => new Promise( resolve =>{
   console.log('updateProduct');
   someObj.updateProductHTML();
   resolve();
});

//execute promise chain

mainPromise()
    .then(getData)
    .then(updateProduct)
    .then(page.updateDOM)
;

我将 promise 更新为不立即 resolve 并尝试在调用我的函数后调用 resolve(尽管我不确定 resolve 是否会在这些函数之前或之后被调用)。

不幸的是，我仍然遇到同样的行为。我已将控制台日志添加到我的函数和我的 promise 中，我正在取回此列表

   log.spinner spinning
   log.getData
   log.updateProduct
   log.A log from the function updateProduct calls
   log.48 product objects created (for loop worker in my getProducts   function)
   log.Data retrieved and assigned
   the last two logs would ideally be called after getData

提供的调用或函数之外的所有调用或函数都不是返回 promise ，我正在处理遗留代码并且我正在远离 setTimeout 技巧以及我的结果不一致。

--更新 2--

我遇到的问题称为 fork /拆分。我只需要专门找出链接来解决我的问题。

-- 最终的--

这就是我最终的结果

 // execute promise chain

mainPromise()
    .then(getData);

//the timeout is a little hack to ensure the sequence is kept
mainPromise()
    .then(() => {
        setTimeout(() => {
            myObj.updateProductHTML();
            myObj.updateDOM();
        }, 0);

    });

显然 .then(foo).then(bar) 只是同时运行 foo 和 bar

似乎工作正常，但我觉得它仍然有些不对劲。

Answer 1

我相信这是因为 Promise.resolve() 并没有像您想象的那样。

Promise.resolve() 创建一个新的 Promise 并立即使用给定的 value 解决它。 setTimeout 之类的东西会立即返回它们的 id(一个整数)，因此它们没有按照您的意愿进行。您的 getProducts() 可能是一个异步调用，因此它可能返回 null 或其他内容(如果它返回一个 Promise 或返回同步值，就可以了)。

您最好编写一个普通的 Promise 并在适当的时候调用 resolve()。

const mainPromise = () => Promise.resolve(
    console.log('spinner spinning...')
    ...spinner code....
);

// Assuming it's already returning a Promise or synchronous response. If it isn't, then deal with it like the setTimeout ones below.
const getData = () => someObj.getProducts('data.json')

const updateProduct = () => new Promise(resolve => {
    setTimeout(()=>{
        someObj.updateProductHTML();
        resolve();
    }, 0)
});

// You don't NEED to in your example since it's at the end of the chain, but you probably want to wrap this too in case you add to the chain.
const updateDom = () => new Promise(resolve => {
    setTimeout(()=>{
        someObj.updateDOM();
        resolve();
    }, 0)
});