回调执行后解决承诺答案

【问题标题】：Resolve promise after callback it's executed回调执行后解决承诺
【发布时间】：2020-12-23 05:22:08
【问题描述】：

我有以下代码，我试图多次阻止方法 _saveAddress 的执行，所以我对这个方法做出了承诺。

const [pressEventDisabled, setPressEventDisabled] = useState(false);

<TouchableOpacity style={style.button_container} activeOpacity={1} disabled={pressEventDisabled} onPress={async () => {setPressEventDisabled(true); await _saveAddress(); setPressEventDisabled(false);}} >

问题是我想在回调方法执行后解决承诺。有没有什么办法可以等待dispatch函数执行或者在回调方法里面解决promise？

这是保存地址的方法：

const _saveAddress = () => new Promise(async (resolve) => {
    var valid = _validate();
    if (valid) {
        const address = createAddressJson();
        if (addressId) {
            var addressIdProperty = {
                id: addressId
            };
            const newAddress = Object.assign(addressIdProperty, address);
            dispatch(editAddress(newAddress, _onAddressSaveEditCallback));
        } else {
            dispatch(addAddress(address, _onAddressSaveEditCallback));
        }
    } else {
        //notify
        notifyMessage(strings.fill_required_inputs_validation);
        resolve();
    }
});

这是回调方法：

const _onAddressSaveEditCallback = async (success: boolean, apiValidations: any, address ? : Address, ) => {
    if (success) {
        if (typeof callback == 'function') {
            callback(address);
        }
        await Navigation.pop(componentId);
    } else {
        setDataValidations(apiValidations);
    }
};

【问题讨论】：

new Promise(async (.... ...从来都不是好代码的标志...承诺的执行者永远不应该是异步函数 - 表明你做错了什么
如所写，只有当您调用它时，该承诺才会解决，_validate() 返回 false ...因此，当调用 await _saveAddress() 时，如果 _validate() 返回 true，它将永远等待
Never pass an async function as the executor to new Promise!
editAddress 和 addAddress 是做什么的？看起来这些应该是返回承诺的函数（而不是接受回调）
我将数据与这些数据一起保存在服务器上，然后根据收到的响应调用回调方法。

标签： javascript reactjs typescript react-native async-await

【解决方案1】：

完全按照你在标题中所说的去做。不多不少：

if (addressId) {
    var addressIdProperty = {id: addressId};
    const newAddress = Object.assign(addressIdProperty, address);
    dispatch(editAddress(newAddress, async (s,v,a) => {
        await _onAddressSaveEditCallback(s,v,a);
        resolve();
    }));
} else {
    dispatch(addAddress(address, async (s,v,a) => {
        await _onAddressSaveEditCallback(s,v,a);
        resolve();
    }));
}

当然，由于您将async () => {} 传递给addAddress 而不是_onAddressSaveEditCallback，因此您必须自己调用_onAddressSaveEditCallback，因为addAddress 将调用async () => ...

但是像这样混合 Promise 和回调并不是很好。它会导致看起来很奇怪，有时甚至令人困惑的代码。更好的解决方案是promisify addAddress:

function addAddressPromise (address) {
    return new Promise((resolve, reject) => {
        addAddress(address, (success, validations, address) {
            if (success) return resolve(address);
            else reject(validations)
        });
    });
}

现在你可以等待 addAddress:

const _saveAddress = async () => {
    // Don't create new promise here, we do it in addAddress..

    // ...

    let result = await addAddressPromise(address);
    dispatch(result);
    await _onAddressSaveEditCallback();

    // ...

}

【讨论】：