如何在 React JS Axios 中将请求有效负载作为可选的 api 调用发送

Question

我正在尝试调用 API 在 React JS 中使用 Axios。有时我会有产品 ID，有时我没有产品 ID。目前，由于产品 ID，我正在复制代码。

This is API which is in common.js

fetchProducts: (payload) => put(`/products`, payload),

products.js

      if (productID) {
                        common.fetchProducts({
                            selectedItems: checkedItems,
                            productID: productID,
                        })
                            .then((resp) => {
                                console.log("Success",resp);
                            })
                            .catch((err) => {
                                   console.log("Failure",err);
                            });
                    } else {
                        common.fetchProducts({
                            selectedItems: checkedItems,
                        })
                            .then((resp) => {
                                console.log("Success",resp);
                            })
                            .catch((err) => {
                                   console.log("Failure",err);
                            });
                    }

和 products.js 组件由于这个可选参数，我有更多的 API 调用，我重复了很多代码。如何简化这个 API 调用？

Answer 1

您可以使用 conditional operator 来减少您的代码：

common.fetchProducts(
  productID
    ? {
        selectedItems: checkedItems,
        productID: productID,
      }
    : { selectedItems: checkedItems }
);