在React中，我能否在单个组件中进行多个fetch操作？

Question

在React中，我能否在单个组件中进行多个fetch操作？

3

我正在使用React作为我的前端框架，Express.js作为我的后端框架。我对这两个框架都很陌生。我有一个名为Papers的组件，我试图首先通过fetch post将一些文档上传到后端服务器，然后在服务器端执行一些操作，最后从同一处理程序中获取来自服务器的结果。我的处理程序代码如下：

        handleDrop(files) {
          var data = new FormData();

          alert((files[0]) instanceof File);
          files.forEach((file, index) => {
            data.append('file' + index, file);
          });

          fetch('/file_upload', {
            method: 'POST',
            body: data
          });

          // the second fetch would crash the app.
          /*fetch('/file_upload').then(function(data){
              return data.json();
          }).then( json => {
              this.setState({
                  papers: json
              });
              console.log(json);
          });*/
        }

我这里是 get 方法的 Express 后端代码：

app.get('/file_upload', function(req, res){
    // testing
    res.send({name:"lol"});
});

目前的问题是第二次获取数据会导致Express应用程序崩溃。由于我对React和Express不熟悉，是否有人可以给我一些提示，告诉我是否以正确的方式进行操作？谢谢！

服务器代码链接：https://github.com/kaiwenshi/learn-webpack/blob/master/src/server/index.js

- Rocking chief

首先，你正在发送POST请求，并在展示服务器端的GET部分。其次，你可以使用响应主体在同一fetch请求中获取答案。 - Georgiy Dubrov

@GeorgiyDubrov 对于混淆感到抱歉，由于POST方法有点长，所以我没有发布它。现在已经在Github链接上了。 - Rocking chief

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Mitch Lillie · Answer 1

如果你想进行POST请求，Express代码应该长这样：

app.post('/file_upload', function(req, res){
    // testing
    res.send({name:"lol"});
});

你只需要调用一次fetch。响应({name: 'lol'})将在Promise中返回：

    handleDrop(files) {
      var data = new FormData();

      alert((files[0]) instanceof File);
      files.forEach((file, index) => {
        data.append('file' + index, file);
      });

      fetch('/file_upload', {
        method: 'POST',
        body: data
      }).then(function(data){
          return data.json();
      }).then( json => {
          this.setState({
              papers: json
          });
          console.log(json); // logs {name: 'lol'}
      });
    }