ping 在页面中一行一行显示

上代码就完了
这里输入ping地址, 次数,包大小

  
      
        ping：
         
      
      
        次数：
         
      
      
        包大小(Byte)：
         
      
      
        确定
      
    

 componentDidMount() {
      this.rizhi_con = "";
      let url =
        "/ping?ip=" + this.ping + "&count=" + this.cishu + "&size=" + this.size;
      var self = this;
      var f = (r) => {
        return r.read().then(function (result) {
          var data = String.fromCharCode.apply(null, result.value);
          self.rizhi_con += data;
          // self.setState({ live }); // Append live log
          if (!result.done) f(r); // Read next chunk
        });
      };
      // console.log(object);
      fetch(url)
        .then((r) => r.body.getReader())
        .then(f);
    },
    wangluo() {
      let url =
        "/ping?ip=" + this.ping + "&count=" + this.cishu + "&size=" + this.size;
      fetch(url, {
        method: "POST",
        headers: {
          "Content-Type": "application/json",
        },
      }).then((response) => {
        var reader = response.body.getReader();
        var bytesReceived = 0;

        // read() returns a promise that resolves when a value has been received
        reader.read().then(function processResult(result) {
          console.log(result);

          // Result objects contain two properties: //对象包含两个属性
          // done  - true if the stream has already given you all its data. //如果流已经为您提供了所有数据，则为true。
          // value - some data. Always undefined when done is true. //一些数据。完成时始终未定义为真。
          if (result.done) {
            console.log("Fetch complete");
            return;
          }

          // result.value for fetch streams is a Uint8Array
          bytesReceived += result.value.length;
          console.log("Received", bytesReceived, "bytes of data so far");

          // Read some more, and call this function again
          return reader.read().then(processResult);
        });
      });
    },