2016-11-01 83 views
0

因此,我對承諾的理解讓我相信,我的其他承諾會在我的鏈條中一個接一個地運行,但我在這裏做錯了事。承諾不在彼此等待

我使用的是目前的代碼如下

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

和我的諾言鏈

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

他們似乎爲了最初運行,但AJAX調用我在的getProducts也有一個for循環工作者來構建我的對象數組,並在我的所有.thens運行完畢後完成。

我試圖UpdateProduct中和updateDOM前至少有我的數據呼叫和工人完成運行

--- UPDATE ---

確定,所以與設置爲如按建議修訂後的承諾評價和Samanime的回答

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

我更新了承諾,不立即解決,並在嘗試打電話決心後,我打電話給我的功能(雖然我很不安,這就是如果解決之前或這些本功能後,將被稱爲離子)。

不幸的是,我仍然得到相同的行爲。我已經添加控制檯登錄到我的功能以及我的承諾,我得到這個名單後面提供的那些以外的電話或功能的

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 

都不是回報的承諾,我工作的傳統代碼,我正在遠離setTimeout技巧,以及我的結果不一致。

--update 2 -

我有被稱爲分岔/分離的問題。我只需要弄清楚鏈接來解決我的問題。

- FINAL -

這是我結束了工作了

// 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進行工作確定正確的,但我覺得仍然有些事情不對。

+1

嘗試返回Promise.resolve(...) –

+1

他正在使用的格式將返回該解析。 – samanime

+0

爲什麼你(認爲你)需要那些'Promise.resolve'調用?微調,'getProducts'和更新方法不會自行返回承諾嗎? – Bergi

回答

2

我相信這是因爲Promise.resolve()並不完全符合您的想法。

Promise.resolve()創建一個新的Promise並立即使用它的解決它。像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) 
}); 
+0

'mainPromise()'返回什麼? 'Promise'構造函數是否應該替換'mainPromise'上的'Promise.resolve()'? – guest271314

+0

'mainPromise()'返回一個'Promise',然後可以鏈接它。它返回的**值**爲空,但沒關係。 – samanime

+0

在'mainPromise'上使用'Promise.resolve()'的目的是什麼? 「console.log('spinner spinning ...') ... spinner code .... //這是省略代碼」是參數嗎? – guest271314