代码之家  ›  专栏  ›  技术社区  ›  jsDev

调用两个异步操作的正确方法

  •  0
  • jsDev  · 技术社区  · 6 年前

    如何在成功调度另一个操作后调用异步操作?

    我正在学习Redux,我有一些关于异步操作的问题。( 我正在使用thunk )
    我有两个行动:

    export const addToCart = addToCartData => dispatch => {
      axios.post("/api/cart/add-to-cart", {addToCartData)
        .then(res => {
          dispatch({ type: ADD_TO_CART, payload: res.data });
        })
        .catch(err => console.log(err));
    };
    
    export const removeProduct = (userID) => dispatch => {
      axios
        .delete(`/api/wait-list/remove/${userID}`)
        .then(res => {
          dispatch({ type: REMOVE_FROM_WAITLIST, payload: res.data });
        })
        .catch(err => console.log(err));
    };
    

    我想执行 removeProduct 仅在之后执行操作 addToCart 将成功执行!我正试着用其中两个做第三个,看起来是这样的:

    export const addToCartAndPemoveProduct = (data) => dispatch => {
      dispatch(addToCart(data)
      dispatch(removeProduct(data));
    

    但它执行 移除产品 先行动后行动 添加到Cart 。。。。
    由于订单原因,我如何才能正确操作?也许我应该回报第一个承诺,并在成功解决后执行第二个承诺?它将如下所示:

    export const addToCart = addToCartData => dispatch => {
      return axios.post("/some", {addToCartData)
        .then(res => { dispatch({ type: ADD.....})
    };
    
    
    export const addToCartAndPemoveProduct = (data) => dispatch => {
      dispatch(addToCart({ userID, productId }))
      .then(data => {
         dispatch(removeProduct({ userID, productName, productDescr }));
      })
    }
    

    行不行?

    1 回复  |  直到 6 年前
        1
  •  0
  •   timotgl    6 年前

    你呢 总是 要调度 removeProduct 之后 addToCart ?在这种情况下:

    export const addToCart = addToCartData => dispatch => {
        // You'll have to get the userId here first, probably from getState() if it's not being passed in.
    
      axios.post("/api/cart/add-to-cart", {addToCartData)
          .then(res => {
              dispatch({ type: ADD_TO_CART, payload: res.data });
              dispatch(removeProduct(userId));
          })
          .catch(err => console.log(err));
    };
    

    可能将操作重命名为 moveProductFromWaitListToCart 表示完整交易。