如何在反应上使用 axios 发布请求答案

【问题标题】：How to post request using axios on react如何在反应上使用 axios 发布请求
【发布时间】：2017-11-25 20:31:02
【问题描述】：

如何在 reactjs

上使用 axiox 发布请求

我正在构建一个简单的待办事项应用程序。我使用 mongodb 和 nodejs 作为 backend 和 reactjs 作为 frontend。现在我需要知道如何在 reactjs 上使用 axiox 发布请求。因为我想将所有数据存储在我的服务器上。我为此做了一个 crud api。

谢谢:)

【问题讨论】：

你试过axios docs吗？

标签： javascript reactjs api axios

【解决方案1】：

我假设您提到的是 axios 而不是 axiox

首先，您需要安装axios，其中一种方法是使用 npm ，将其安装为终端/windows 的开发依赖项

npm install --save-dev axios

确保在您使用 axios 的任何地方添加 axios。

import axios from 'axios';

然后你可以使用任何你想要使用 axios 的请求。下面是来自axios npm documentation的代码（GET请求），

axios.get('url')
  .then(function (response) {
    // You can do whatever you want to do with the response
  })

确保添加错误捕获：

  .catch(function (error) {
    console.log(error);
  });

您可以在axios documentation上阅读更多信息

如果您想了解有关 axios 的更多信息，请访问 Medium

【讨论】：

【解决方案2】：

这需要更详细的答案。比如当你使用箭头函数时会发生什么，例如 ..

axios.get('my/api/names')
      .then(function (response) {
// you get back an object with config,data,headers,request,status,statusText
// the api im currently working with hands out an array for the data bit of 
//the object then i can loop the data and use it whatever way i want.
        response.data.forEach( item => {console.log(item)}
      })

我不是 100% 这实际上是如何工作的，但是当您使用关键字“then”时，它只是您的标准承诺，在 then() 之后有一个 then.catch(err => {console.log(err )}) 所以它使调试更容易一些。响应以对象的形式传递给函数，因此您可以使用 .符号来访问该对象中的各种事物。我自己在 axios 上有点挣扎，我一直在阅读它，但在某些情况下需要一些奇怪的规则，比如 { data } 。我希望有人提出更好的答案。 axios 是一个非常好的工具，当你有很多 API 请求同时发生时，它真的很有帮助。你可以使用 axios.all() 来同时做所有的请求

axios.all(myArray.map(myArr => axios.get('/domain/thing/${myArr.names}/names')))

这段代码一次性发送所有请求，在某些情况下很方便。继续阅读文档并尝试一下。我发现在 chrome 的“网络”选项卡中放置断点并观察请求通过并查看“源”选项卡中代码的解释方式并观察值逐行更改很有用。我在 React 中使用的另一个好工具是 MobX，它只是一个状态管理工具，它非常有趣，并且在 eggheads.io 上有一个很好的课程，一些德国人很好地解释了事情。祝 React 好运

【讨论】：