我怎样才能重构我的代码以确保没有重复

Question

我将在我正在处理的项目中调用三个不同的端点。除了我将调用的不同 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();    }我该如何编写此代码以避免重复，因为除了基本网址之外，所有内容都是相同的。

Answer 1

为您的帖子请求创建一个函数：

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)

}

Answer 2

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)

        })

}

Answer 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. 这也可以作为参数传递吗？