如何在 reactjs 中向 nodejs RESTful API 发出 POST 请求

Posted 2023-02-22

【中文标题】如何在 reactjs 中向 nodejs RESTful API 发出 POST 请求

【英文标题】：How to make a POST request to a nodejs RESTful API in reactjs

【发布时间】：2019-02-22 02:13:42

【问题描述】：

我用nodejs 和express 构建了我的后端restful API，我也有一个基于Reactjs 的前端，我正在尝试制作一个登录页面。 我的想法是在Reactjs 中向我的Nodejs RESTful API 发出POST 请求，包括用户名和密码，然后后端将检查请求信息是否正确将返回令牌，否则将返回失败消息。 但我不知道在reactjs 中发出POST 请求的正确方法是什么。 我只使用$.ajax() 吗？ 我试图避免使用jquery，因为我认为有很多方法可以做同样的事情。 提前致谢。

【问题讨论】：

尝试使用axios或fetch

【参考方案1】：

如果您不想使用第三方库，可以使用fetch。

查看here 一篇关于如何在反应中使用 fetch 的好文章。

【讨论】：

谢谢，这绝对让我很开心。

【参考方案2】：

使用axios。无需使用jquery。

axios.post("http://api/login",  options ).then(res => ...).catch(err => ...)

选项将是： username: username, password: password ...etc

我喜欢fetch 的地方在于，您可以定义一个baseurl（而不是为每个AJAX 请求一遍又一遍地编写http://localhost:5000/api/...）并且axios 会自动处理JSON。

【讨论】：

不应该是 axios.post("APIURL", u​​sername: username, password: password).then(res => ...).catch(err => . ..) ??第二个论点

更新了评论。 :)

【参考方案3】：

您应该将 axios.js 与 saga.js 框架一起使用。

// Send a POST request
axios(
  method: 'post',
  url: '/user/12345',
  data: 
    firstName: 'Fred',
    lastName: 'Flintstone'
  
);

【参考方案4】：

只需实现这个

function submitRequest(opts) 
      console.log('Posting request to your API...');
      fetch('http://your_url', 
        method: 'post',
        body: JSON.stringify(opts)
      ).then(function(response) 
        return response.json();
      ).then(function(data) 
       console.log(':', data);
      );