的JavaScript - 終極版咚不等待任何承諾

Question

我有像這樣

array =[ {message:'http://about.com'}, {message:'http://facebook.com'}] 

我想循環，數組的數組，在每個項目我會請求服務器獲取數據opengraph然後保存數據返回到數組。這是我期望的

array =[ 
    { 
     message: { url:'http://about.com', title:'about'} 
    }, 
    { 
     message:{ url:'http://facebook.com', title:'facebook'} 
    } 
] 

然後當這一切都完成。我想分配一個有效載荷的行動是預期的陣列。這是我怎麼做

return dispatch => { 

    let array =[ {message:'http://about.com'}, {message:'http://facebook.com'}] 

    let quests = array 
    .map((item) => { 
     axios.get(getOpenGraphOfThisLink + item.message) 
     .then(result =>{ 
      item.message = (result.data) 
      return result 
     }) 
    }) 

    Promise.all(quests).then(() => { 
     console.log('modified', array) 
     dispatch({ 
      type : constant.GET_POST_COLLECTION_SUCCESS, 
      payload: array 
     }) 
     // this dispatch function sends my original array instead of modified one. 
    }) 
} 

問題：代碼中的調度功能將我的原始數組發送到reducer而不是修改的。我想派遣發送新的修改後的數組。我認爲應該，不是嗎？

Answer 1

眼下quests變量只是你原來的陣列分配的，因爲map函數返回空隙，但你需要每個項目的承諾回到quests，所以只需添加return關鍵詞，讓你的代碼是這樣的：

let quests = array 
    .map((item) => { 
     return axios.get(getOpenGraphOfThisLink + item.message) 
     .then(result =>{ 
      item.message = (result.data) 
      return result 
     }) 
    }) 

Answer 2

這是一個範圍界定問題。你一定是指一個錯誤的變量：

return dispatch => { 

    let array =[{ // <- the original array 
     message:'http://about.com' 
    }, { 
     message:'http://facebook.com' 
    }] 

    let quests = array.map((item) => { 
     axios.get(getOpenGraphOfThisLink + item.message) 
     .then(result =>{ 
      item.message = (result.data) 
      return result 
     }) 
    }) 

    Promise.all(quests).then(() => { 
     console.log('modified', array) // <- here, array is reference to the original array 
     dispatch({ 
      type : constant.GET_POST_COLLECTION_SUCCESS, 
      payload: array 
     }) 
     // this dispatch function to send my original array instead of modified one. 
    }) 
} 

傳遞給Promise#then函數應該接受一個參數，該承諾的分辨率的結果。在Promise.all的情況下，這個單個參數是一個結果數組，每個項目都指向一個帶有相應索引的Promise。所以它應該是

return dispatch => { 

    let array =[{ 
     message:'http://about.com' 
    }, { 
     message:'http://facebook.com' 
    }] 

    let quests = array.map((item) => { 
     return axios.get(getOpenGraphOfThisLink + item.message) // don't forget to return when doing Array#map. 
     .then(result =>{ 
      item.message = (result.data) 
      return result 
     }) 
    }) 

    Promise.all(quests).then((array) => { // <- the new array, redefined in scope of this arrow function 
     console.log('modified', array) // <- here, array is reference to the new array which is the first argument of function passed to Promise#then. 
     dispatch({ 
      type : constant.GET_POST_COLLECTION_SUCCESS, 
      payload: array 
     }) 
     // this dispatch function will send the results of calling all the Promises passed to Promise.all! 
    }) 
} 

Answer 3

如果我理解正確的話，你是變異array.message每個請求都完成後result.data。

IMO，你不應該這樣做

let quests = array.map((item) => { 
    return axios.get(getOpenGraphOfThisLink + item.message) 
       .then(result => result.data) 
}) 

Promise.all(quests).then((values) => { 
    // values contains all the result data. 
} 

不要忘了處理錯誤情況。

Answer 4

允許函數對傳遞給它的項進行變異通常不是好習慣。

在這種情況下，如果某些axios.get（）成功並且某些失敗，那麼最終會出現部分變異數組，這很可能是不可取的。

相反，您可以映射到原始項目的突變克隆的陣列，並將映射陣列傳遞到承諾鏈。

假設不涉及「獲取者」，可以使用Object.assign()來執行克隆的克隆和突變。現在

let quests = array.map(item => { 
    return axios.get(getOpenGraphOfThisLink + item.message) 
    .then(result => Object.assign({}, item, { message: result.data }); 
}); 

return Promise.all(quests).then(arr => { 
    console.log('mapped', arr); // note 'mapped', not 'mutated' 
    // 'x' 
    dispatch({ 
     'type': constant.GET_POST_COLLECTION_SUCCESS, 
     'payload': arr 
    }); 
}); 

，如果你真的想變異原始數組，你可以點一個全有或全無的基礎上這樣做「X」用：

Object.assign(array, arr);