如果条件没有响应数据react.js中的axios发布请求答案

【问题标题】：axios post request in if condition has no response data react.js如果条件没有响应数据react.js中的axios发布请求
【发布时间】：2021-10-19 12:03:29
【问题描述】：

我希望 api 发送 otp，但是当 default_2fa 是 mobile 或 email.write 此代码但响应为 null 即使状态代码为 200 时，我在 if 语句之外对 otpcall 进行了一些测试，并且响应运行良好

    const login = (values) => {

     let payload = {
        "input": values.phone_number,
        "password": values.password,
        "user_agent":"postman",
        "client_host":"local"
      }
      axios.post(loginUrl, payload = payload)
          .then(resp => {
            
              if (typeof resp !== 'undefined') {
                   if (resp.data.result.is_2fa_active) {
                    if (resp.data.result.default_2fa === "authenticator_app") {
                        setAuthenticatorApp(true)
                    }
                    if ( resp.data.result.default_2fa === "mobile" || resp.data.result.default_2fa === "email") {
                        let payloadOtp = {
                            "type": resp.data.result.default_2fa,
                            "input": values.phone_number,
                            "password": values.password,
                        }
                         axios.post(otpUrl, payloadOtp).then(response => {
                             setEmailOrSmsAuth(true)
                             return response
                        })
                    }
                  }
              }
          })


  }

当我调用此 api 时，otp api 状态代码为 200，并且有效负载具有我想要的所有值，但响应为空请帮我看看我的代码有什么问题！

【问题讨论】：

标签： reactjs if-statement axios http-post httpresponse

【解决方案1】：

我相信你的问题取决于一切。

因为.then 仅在 POST 请求完成后才运行，因此只能在回调内部访问响应。预期的解决方案是将所有逻辑移动到回调中，但如果您有很多后续逻辑，这可能会变得混乱。

另一种（通常是首选）方法是对请求使用 Promise，然后使用 await 等待响应。然后，这会将结果返回到具有正确范围的逻辑的其余部分，允许您像使用任何其他变量一样使用它。我不知道您在 POST 请求中使用的是什么库或方法，但是没有针对您想要的库的 Promises 的预制解决方案，您可以将您的请求包装在 Promise 中并调用它。语法类似于：

const postApiPromise = (loginUrl, payload ) => {
  return new Promise((resolve, reject) => {
    service.post_api(loginUrl, payload = payload) => {
      if (err) return reject(err)
      resolve(data)
    })
  })
}

【讨论】：

感谢您的及时回复，我使用 axios（创建我自己的 axios），我将更改代码以便更好地理解。我不知道我必须如何以及在哪里使用 await？

【解决方案2】：

我意识到这个问题来自服务器。以下是我的解决方案。

代码

const login = (values) => {

    setIsLoading(true);

    sessionStorage.setItem('mobile', values.phone_number);  //set mobile into local session

    sessionStorage.setItem('password', values.password);  //set password into local session

    const loginUrl = `${BASE_URL(IAM_APP)}/auth/login/`

    let payload = {

        "input": values.phone_number,

        "password": values.password,

        "user_agent": "postman",

        "client_host": "local"

    }

    axios.post(loginUrl, payload)   //request for login if 2factor authentication is true then send to another component

        .then(resp => {

            if (resp !== undefined){
                
                if (resp.data?.result?.access_token) {

                setToken(resp.data.result)

                setTimeout(() => {

                    window.location.href = DASHBOARD

                }, 1000);

            } else if (resp?.data?.result.is_2fa_active === true) {

                if (resp.data.result.default_2fa === "authenticator_app") {

                    history.push(LOGIN2FAAUTHENTICATOR);
                    
                } else if (resp.data.result.default_2fa === "email") {

                    history.push(LOGIN2FAEMAIL);

                } else if (resp.data.result.default_2fa === "mobile") {

                    history.push(LOGIN2FASMS);

                }

            }

        }

        })


}

then for example in the LOGIN2FASMS route solve issue like this

const otpSent = () => {   //send otp to mobile

    const otpUrl = `${BASE_URL(IAM_APP)}/auth/2fa/otp/`

    let payloadOtp = {

        "type": "mobile",

        "input": mobile,

        "password": password,

    }

    return axios.post(otpUrl, payloadOtp)

}

useEffect(() => {

    otpSent().then(resp => {

        if (resp?.data?.result === 'otp sent'){
            
        }
        else

            otpSent()

        }

    )

}, [mobile, password]);

yeah, its done ;)

【讨论】：