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

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