axios post if 条件下的请求没有响应数据 react.js

Question

我想 api 发送 otp 但是当 default_2fa 是移动的或 email.write 这个代码但是 respone 是 null 即使状态代码是 200 ，我在 otpcall 之外做了一些测试if 语句和响应效果很好

    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，有效负载具有我想要的所有值，但响应为空请帮我看看我的代码有什么问题！

Answer 1

我相信你的问题涉及到所有问题。

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

另一种（通常是首选）方法是对请求使用 Promise，然后使用 await 等待响应。然后，这会将 return 结果传递给具有正确范围的其余逻辑，允许您像使用任何其他变量一样使用它。我不知道您的 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)
    })
  })
}

Answer 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 ;)

axios post if 条件下的请求没有响应数据 react.js

axios post request in if condition has no response data react.js

reactjs

if-statement

axios

http-post

httpresponse