如何在 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 });    }  });