redux thunk-承諾完成后如何在嵌套數組中分配數據

Question

我想將newArray中的所有“默認文本”都轉換為“新文本”。 然后用“新文本”調度數組。 問題是調度功能正在調度“默認文本”。 看起來它不等待承諾。 我在以下代碼中的諾言設置有什么問題？

return dispatch => {
    let newarray =[ 
        { post:[ {message:'default text'}, {message:'default text'}] }
    ]
    let quests = newarray.map( (i) => {
        return i.post.map( (item) => {
            return axios.get(someLink).then( result =>{
                item.message = 'new text'
                return result
            })
        })
    })

    Promise.all(quests).then( () => {
        dispatch({
            type: constant.GET_SUCCESS,
            payload: newarray
        })
    }).catch( () =>{
        console.log('no result')
    })
}

Answer 1

您的輸入數據結構如下：

[
    {
        post: [
            {message:'default text'},
            {message:'default text'}
        ]
    }
]

您的代碼將其轉換為：

[
    [
        Promise<Axios>,
        Promise<Axios>
    ]
]

因此，在外部層面，沒有辦法知道內部承諾何時完成。 我們需要額外的承諾來將這些信息向上移動到對象圖上。 本質上，我們需要：

Promise<[
    Promise<[
        Promise<Axios>,
        Promise<Axios>
    ]>
]>

因此，當所有內部承諾都在執行時，最高級別的承諾就可以解決。 這樣做的代碼看起來非常相似：

return function () {
    var newarray = [{ post: [{ message: 'default text' }, { message: 'default text' }] }];

    return Promise.all(newarray.map(function (i) {
        return Promise.all(i.post.map(function (item) {
            return axios.get(someLink).then(function (result) {
                item.message = 'new text';
            });
        }));
    })).then(function () {
        return {
            type: constant.GET_SUCCESS,
            payload: newarray
        };
    }).catch(function (error) {
        return {
            type: constant.GET_ERROR,
            payload: 'no result ' + error
        };
    });
};

如果您認為可以提高清晰度（可以），則可以使用箭頭功能：

return () => {
    var newarray = [{ post: [{ message: 'default text' }, { message: 'default text' }] }];

    return Promise.all(newarray.map( i => Promise.all(
        i.post.map( item => axios.get(someLink).then( result => {
            item.message = 'new text';
        }) )
    ))).then( () => ({
        type: constant.GET_SUCCESS,
        payload: newarray
    })).catch( (error) => ({
        type: constant.GET_ERROR,
        payload: 'no result ' + error
    }));
};

---

一般說明：我已經從您的代碼中刪除了回調函數。 它與從內部調用代碼連續回調的承諾背后的哲學相矛盾。

而不是這樣做（本質上是您的代碼）：

function bla(callback) {
   asyncFunction().then(someProcessing).then(callback);
}

做這個：

function blaAsync() {
   return asyncFunction().then(someProcessing);
}

注意第二個變量如何不再依賴於其調用者。 它只是執行任務並返回結果。 呼叫者可以決定如何處理它：

blaAsync().then(function (result) {
   // what "callback" would do
})

Answer 2

嵌套，異步和克隆（或模仿）的要求使這變得有些棘手：

您可以將所需的數組構建為外部變量：

function getMessagesAndDispatch(array) {
    try {
        let array_ = []; // outer variable, mimicking `array`
        let outerPromises = array.map((a, i) => {
            array_[i] = { 'post': [] }; // mimicking `a`
            let innerPromises = a.post.map((item, j) => {
                array_[i].post[j] = {}; // mimicking `item`
                return axios.get(getOpenGraphOfThisLink + item.message).then(result => {
                    array_[i].post[j].message = result.data;
                }).catch((e) => {
                    array_[i].post[j].message = 'default text';
                });
            });
            return Promise.all(innerPromises);
        });
        return Promise.all(outerPromises).then(() => {
            dispatch({
                'type': constant.GET_SUCCESS,
                'payload': array_
            });
        }).catch((e) => {
            console.log('no result');
            throw e;
        });
    } catch(e) {
        // in case of a synchronous throw.
        return Promise.reject(e);
    }
}

另外，也可以省去外部變量，並允許promise傳遞數據：

function getMessagesAndDispatch(array) {
    try {
        let outerPromises = array.map(a => {
            let innerPromises = a.post.map((item) => {
                return axios.get(getOpenGraphOfThisLink + item.message).then(result => {
                    return { 'message': result.data }; // mimicking `item`
                }).catch((error) => {
                    return { 'message': 'default text' }; 
                });
            });
            return Promise.all(innerPromises).then((items_) => {
                return { 'post': items_ }; // mimicking `a`
            });
        });
        return Promise.all(outerPromises).then((array_) => {
            dispatch({
                'type': constant.GET_SUCCESS,
                'payload': array_ // mimicking `array`
            });
        }).catch((e) => {
            console.log('no result');
            throw e;
        });
    } catch(e) {
        // in case of a synchronous throw.
        return Promise.reject(e);
    }
}

除我自己的錯誤外，這兩個版本都應該工作。

如果需要，可以將錯誤的默認值注入更為全面。