如何在 javascript / jsx 中计算获取请求的进度

Question

我正在发送此获取请求，并且应用程序正在使用进度条来显示加载状态，我想手动创建步骤，如下面的代码所示，但似乎不起作用，用户只能看到一半的进度，最后一个一半基本上是一步，return response.json()我猜功能挂了。  free = () => {    self.setState({ percent: 10, loadingState: "You're in" });    fetch(url)      .then(response => {        if (response.status !== 200) {          self.setState({ loading: false, error: true });          console.log('NOT_FOUND');        }        else if (response.status === 200) {          self.setState({ percent: 30, loadingState: 'DB_200_OK' });          return response.json()        }      })      .then(data => {        self.setState({ percent: 50, loadingState: "Parsing JSON" });        self.setState({          loadingState: 'Building the UI',          keys: data.keys,          loading: false,          ok: true,          percent: 70,        })        if (self.state.keys.length === 0) {          this.setState({ empty: true, percent: 90, })        } else {          this.setState({ empty: false, percent: 90, })        }        this.setState({ loadingState: 'Almost done', })      }).catch(err => console.log('JSON parse error'));  }如何在不使用 setTimeout 或类似方法的情况下显示函数执行的正确进度，我尝试了到目前为止收到的数据包，但我不确定如何获取数据大小  var reader = response.body.getReader();  reader.read().then(result => {    console.log(result)  });

Answer 1

的setState是异步，如果你想setState了一个又一个，你需要做的是这样的：

this.setState(

  {

    keys: data.keys

  },

  () => {

    if (this.state.keys.length === 0) {

      this.setState({ empty: true, percent: 90 });

    } else {

      this.setState({ empty: false, percent: 90 });

    }

  }

);