javascript как рефакторинговать этот код, передавая что-то другое внутри axios, а затем

#javascript #refactoring

Вопрос:

Как преломить код в javascript

   const handleClick1 = () => {
    axios.get("someurl.com")
    .then((res) => {
          console.log(JSON.stringify(res, null, 2));
          ----- execute something different 
        })
    .catch((err) => console.log(err))
  };

  const handleClick2 = () => {
    axios.get("someurl.com")
    .then((res) => {
          console.log(JSON.stringify(res, null, 2));
          ----- execute something different 
        })
    .catch((err) => console.log(err))
  };


  const handleClick3 = () => {
    axios.get("someurl.com")
    .then((res) => {
          console.log(JSON.stringify(res, null, 2));
          ----- execute something different 
        })
    .catch((err) => console.log(err))
  };
 

Я хочу создать функцию

 const axios_related = (----- execute something different) => {
    axios.get("someurl.com")
    .then((res) => {
          console.log(JSON.stringify(res, null, 2));
          ----- execute something different 
        })
    .catch((err) => console.log(err))
  };
}
 

и заменить как

 const handleClick1 = () => {
    ----- execute something different {
      -- step1
      -- step2
      -- step3
      ---
      -- stepn      
    }

    axios_related(----- execute something different );
  };

  const handleClick2 = () => {
    ----- execute something different {
      -- step1
      -- step2
      -- step3
      ---
      -- stepn      
    }

    axios_related(----- execute something different );
  };


  const handleClick3 = () => {
    ----- execute something different {
      -- step1
      -- step2
      -- step3
      ---
      -- stepn      
    }
    axios_related(----- execute something different );
  };
 

Ответ №1:

Создайте функцию более высокого порядка, которая принимает обратный вызов и вызывает ее внутри .then .

 const makeHandleClick = (callback) => {
  axios.get("someurl.com")
    .then((res) => {
          console.log(JSON.stringify(res, null, 2));
          callback(res);
        })
    .catch((err) => console.log(err))
};
 
 const handleClick1 = makeHandleClick(callback1);
const handleClick2 = makeHandleClick(callback2);
const handleClick3 = makeHandleClick(callback3);
 

Комментарии:

1. так что это похоже на три слоя, например. 1 — щелчок по кнопке более высокого порядка, 2 — обратный вызов1, 3 — Щелчок по кнопке1