Javascript 使用rest api响应redux asyc任务

在我的新项目注册用户必须通过3个步骤

用户输入电话号码

使用sms代码验证电话号码

完整的个人信息

使用RESTAPI进行用户注册工作 第一个api发布电话号码，返回4位代码，并将代码存储在redux中 然后用户必须插入4位数字，如果它正确的第二个api post电话号码和数字，如果用户电话号码在返回空字符串之前未注册，否则返回令牌并存储在redux中 当我得到响应时，我想检查它是否是空字符串用户，请转到步骤3，否则显示错误消息，现在我使用setTimeout执行此操作，但这不是正确的方法，我正在寻找正确的方法

这是我的代码：

// check user insert correct 4 digit
if (this.state.smsCode === this.props.smsCode) {

      // Post phone number and sms code with redux action
      this.props.setUserToken(this.state.phoneNumber, this.state.smsCode);

      setTimeout(() => {

        if (this.props.userToken === "") {
          // go to next step
        } else {
          // show error
        }
      }, 4000);
    }

---

快速评论然后是一个示例实现

JS最佳实践

使用这样的setTimeout是一种糟糕的JS实践。这表明你没有想象异步/多线程语言是如何工作的，应该如何实现。如果服务器被限制，并且需要5000毫秒才能返回响应，那么您将错过响应。相反，如果需要10毫秒，您的用户将无缘无故地等待3990毫秒。setUserToken应接受回调作为参数或返回承诺，以允许异步代码执行。i、 e

this.props.setUserToken(this.state.phoneNumber, this.state.smsCode)
.then(res => {/*move on*/})
.catch(err => {/*display error*/})

// OR

this.props.setUserToken(
  this.state.phoneNumber, 
  this.state.smsCode, 
  (res, err) => {
    if(err) {
      // set error
    } else {
      // move on
    }
)

示例

下面您可以看到一个实现，它可以满足您提出的需求。它将呈现三个视图：电话号码输入表单、代码提交表单和验证视图表单。将您的服务器调用挂接到此中，它将正常工作：

import React from 'react';

export default class App extends React.Component {
  constructor(props) {
    super(props)

    this.state = {
      step: 'phone',
      number: null,
      error: undefined
    }

    this.requestCode = phoneNumber => {
        // api request code here with phone number
        /*
        api.requestCode(phoneNumber, (res, err) => console.log(err ? 'FAIL' : 'WE DID IT!'))
        */
    }

    this.verifyCode = code => new Promise((resolve, reject) => {
        // api request here submitting the code asynchronously
        // in the async function triggered when the api responds, 
        // either set an error or allow them through:
        /*
        api.verifyCode(code, (res, err) => {
            if(err) {
                reject(err)
            } else {
                resolve(res)
            }

        })
        */
    })

    this.submitPhoneNumber = e => {
      const phoneNumber = this.refs.phoneInput.value

      this.setState({
        step: 'code',
        number: phoneNumber
      })

      this.requestCode(phoneNumber)
    }

    this.submitCode = e => {
        const code = this.refs.codeInput.value
        this.verifyCode(code)
            .then(res => this.setState({step: 'authenticated'}))
            .catch(err => this.setState({error: err}))
    }
  }

  renderInputPhone() {
    return (
    <div>
      <form onSubmit={this.submitPhoneNumber}>
        <div>Input phone number</div>
        <input ref="phoneInput"></input>
        <div>
          <button type="submit">submit!</button>
        </div>
        <div>
            <button onClick={e => this.requestCode(this.state.number)}>Resent code</button>
        </div>

      </form>
      <div>
        <button onClick={e => this.setState({step: 'phone'})}>back</button>
      </div>
     </div>
    )
  }

  renderCodeInput() {
    return (
      <form onSubmit={this.submitCode}>
        <div>Input sent code</div>
        <input ref="codeInput" defaultValue={this.state.number}></input>
        <div>
          <button type="submit">submit!</button>
        </div>
      </form>
    )
  }

  renderAutheticatedView() {
    return (
        <div>we're in</div>
    )
  }

  render() {
    return (
      this.state.step === 'phone' ? this.renderInputPhone()
      : this.state.step === 'code' ? this.renderCodeInput()
      : this.state.step === 'authenticated' ? this.renderAutheticatedView()
      : null
    );
  }
}

从“React”导入React；
导出默认类App扩展React.Component{
建造师（道具）{
超级（道具）
此.state={
步骤：“电话”，
编号：空，
错误：未定义
}
this.requestCode=phoneNumber=>{
//此处的api请求代码和电话号码
/*
请求代码（电话号码，（res，err）=>console.log（err？'FAIL'：'wedoit！'）
*/
}
this.verifyCode=code=>新承诺（（解决、拒绝）=>{
//api请求在此异步提交代码
//在api响应时触发的异步函数中，
//设置错误或允许他们通过：
/*
api.verifyCode（代码，（res，err）=>{
如果（错误）{
拒绝（错误）
}否则{
解决（res）
}
})
*/
})
this.submitPhoneNumber=e=>{
const phoneNumber=this.refs.phoneInput.value
这是我的国家({
步骤：“代码”，
号码：电话号码
})
此.requestCode（电话号码）
}
this.submitCode=e=>{
常量代码=this.refs.codeInput.value
此.verifyCode（代码）
.then（res=>this.setState（{step:'authenticated'}））
.catch（err=>this.setState（{error:err}））
}
}
renderInputPhone（）{
返回(
输入电话号码
提交
this.requestCode（this.state.number）}>重新发送代码
this.setState（{step:'phone'}}>返回
)
}
renderCodeInput（）{
返回(
输入发送代码
提交
)
}
RenderAuthenticatedView（）{
返回(
我们进去了
)
}
render（）{
返回(
this.state.step=='phone'？this.renderInputPhone（）
：this.state.step==“code”？this.renderCodeInput（）
：this.state.step=='authenticated'？this.renderauthenticatedView（）
：null
);
}
}

Use componentdiddupdate lifecycle method（或useffect hook）@tiagocoleho您能给出一个示例代码吗？