Блог

Я пытаюсь создать API в React JS с помощью AXIOS. Мне нужно отправлять разные типы параметров, в зависимости от наличия параметров. В настоящее время я звоню, как показано ниже, и он работает так, как ожидалось. Код становится более длинным, когда у меня появляется больше необязательных значений. Как я могу упростить или оптимизировать приведенный ниже вызов api

 const axiosHandler = () => {
   
        let request;
        if (productID amp;amp; type) {
            request = common.fetchDetails(
                { productID: productID, type: type },
                {
                    assignedTo: popUpID.current.toString(),
                    selectedItems: checkedItems,
                },
            );
        } else if (productID) {
            request = common.fetchDetails(
                { productID: productID },
                {
                    assignedTo: popUpID.current.toString(),
                    selectedItems: checkedItems,
                },
            );
        } else if (type) {
            request = common.fetchDetails(
                { type: type },
                {
                    assignedTo: popUpID.current.toString(),
                    selectedItems: checkedItems,
                },
            );
        } else {
            request = common.fetchDetailsWithoutParams({
                assignedTo: popUpID.current.toString(),
                selectedItems: checkedItems,
            });
        }
        request
            .then((res) => {
                console.log('res', res);
            })
            .catch((err) => {
                console.log('err', err);
            });
    };
 

 const axiosHandler = () => {

    let request;
    /**
    var productID='';var type=''; //modify this to test as per your neds
    var param ={
    ...(productID amp;amp; {productID: productID}),
    ...(type amp;amp; {type: type})
    }
    console.log(param)
    */

    if (productID amp;amp; type) {

      //Use conditional spread operator
      const arg1 = {
        ...(productID amp;amp; {
          productID: productID
        }),
        ...(type amp;amp; {
          type: type
        })
      }
      const arg2 = {
        assignedTo: popUpID.current.toString(),
        selectedItems: checkedItems,
      }

      if (arg1) { //if both productID and type are empty arg1 will be undefined.
        request = common.fetchDetails(arg1, arg2);
      } else {
        request = common.fetchDetails(arg2);
      }

      request
        .then((res) => {
          console.log('res', res);
        })
        .catch((err) => {
          console.log('err', err);
        });
    }; 

Объяснение:
Для этого вы можете использовать оператор условного распространения.

Подробнее здесь: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_syntax

вы можете использовать оператор распространения для создания объекта, например, для создания объекта вашего параметра :

   { ...(productID amp;amp; false),  ...(type amp;amp; false) }
 

в этом подходе для exmaple, если ProductID имеет значение true, возвращается {productID:productID} , и если тип имеет значение true, возвращается {type:type} , наконец, если оба возвращают значение true {productID:productID , type:type} и если какой-либо из параметров не определен или равен нулю :
распространение до false не возвращает никаких данных в объекте :
для возврата exmaple {...false,...false} = {}