как я могу реорганизовать свой код, чтобы убедиться, что повторения не будет

ProgramBox

как я могу реорганизовать свой код, чтобы убедиться, что повторения не будет

Post author:admin
Запись опубликована:30 октября, 2022
Post category:Вопросы по программированию

#javascript #reactjs

Вопрос:

Я буду вызывать три разные конечные точки в проекте, над которым я работаю. Все функции, обрабатывающие запросы, одинаковы, за исключением разных URL-адресов, которые я буду вызывать. Ниже приведен пример моего кода

 const handleSubmitPhoneNumber = (e, next) => {
        e.preventDefault();
        const payload = {
            "phone": user.phone
        }
        const postPhoneNumber = async () => {
            setLoading(true)
            await axios.post("https://jsonplaceholder.typicode.com/users", payload)
                .then(response => {
                    setLoading(false)
                    console.log(response)
                    let res = response;
                    if (res.data.id === 11) {
                        next();
                    }
                })
                .catch(error => {
                    console.log(error)
                });
        }
        postPhoneNumber();
    }

    const handleSubmitVerificationCode = (e, next) => {
        e.preventDefault();
        const payload = {
            "verificationCode": user.verificationCode
        }
        const postVerificationCode = async () => {
            setLoading(true)
            await axios.post("https://jsonplaceholder.typicode.com/users", payload)
                .then(response => {
                    setLoading(false)
                    console.log(response)
                    let res = response;
                    if (res.data.id === 11) {
                        next();
                    }
                })
                .catch(error => {
                    console.log(error)
                })
        }
        postVerificationCode();
    }

как я могу написать этот код, чтобы избежать повторения, поскольку все одинаково, кроме базовых URL-адресов.

Ответ №1:

Пожалуйста, попробуйте это.

 const handleSubmitPhoneNumber = (e, next) => {
    e.preventDefault();
    const payload = {
        "phone": user.phone
    }
    postMethod("https://jsonplaceholder.typicode.com/users", payload, next);
}

const handleSubmitVerificationCode = (e, next) => {
    e.preventDefault();
    const payload = {
        "verificationCode": user.verificationCode
    }
    postMethod("https://jsonplaceholder.typicode.com/users", payload, next);
}

const postMethod = async (url, payload, next) => {
    setLoading(true)
    await axios.post(url, payload)
        .then(response => {
            setLoading(false)
            console.log(response)
            let res = response;
            if (res.data.id === 11) {
                next();
            }
        })
        .catch(error => {
            console.log(error)
        })
}

1. next() возможно, потребуется привязка в зависимости от того, где и что будет дальше.

2. Согласно вашему коду, это метод. Может быть логика внутри? Что именно вам нужно сделать внутри этого?

3. Я не уверен, что именно вы имеете в виду

4. Внутри следующей функции, что вы планируете делать? Отобразить сообщение в пользовательском интерфейсе, изменить маршрут и т.д.?

5. @ScottSauyet Я пропустил, что он передал это. Извините.

Ответ №2:

Создайте функцию только для вашего запроса post:

 async function POST(url, payload, next) {
  setLoading(true)
  await axios.post(url, payload)
    .then(response => {
      setLoading(false)
      console.log(response)
      let res = response;
      if (res.data.id === 11) {
        next();
      }
    })
    .catch(error => {
      console.log(error)
    })
}

Тогда вы можете просто использовать эту функцию в своем коде следующим образом:

 const handleSubmitPhoneNumber = (e, next) => {
    e.preventDefault();
    const payload = {
        "phone": user.phone
    }
    POST("https://jsonplaceholder.typicode.com/users", payload, next)

const handleSubmitVerificationCode = (e, next) => {
    e.preventDefault();
    const payload = {
        "verificationCode": user.verificationCode
    }
    POST("https://jsonplaceholder.typicode.com/users", payload, next)
}

Ответ №3:

Немного более чистая версия идеи, выраженной в других ответах, может выглядеть следующим образом:

 const postMethod = (url, getPayload) => async (e, next) => {
    e.preventDefault();
    setLoading(true)
    await axios.post(url, getPayload())
        .then(response => {
            setLoading(false)
            console.log(response)
            let res = response;
            if (res.data.id === 11) {
                next();
            }
        })
        .catch(error => {
            console.log(error)
        })
}

const handleSubmitPhoneNumber = postMethod (
  "https://jsonplaceholder.typicode.com/users",
  () => {phone: user.phone}
)

const handleSubmitVerificationCode = postMethod (
  "https://jsonplaceholder.typicode.com/users",
  () => {verificationCode: user.verificationCode}
)

Основная причина, по которой мне это нравится больше, заключается в том, что обработка e и next не различается между этими обработчиками, поэтому в идеале она относится к общему коду.

Однако я недоволен, в этом или в оригинале, глобальным доступом к user . Может ли это также быть передано в качестве параметра?