如何 post 在 React 上使用 axios 请求

Question

如何在 reactjs[=11 上使用 axiox post 请求 =]

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

谢谢:)

Answer 1

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

首先你需要安装 axios 其中一种方法是使用 npm ，安装它作为来自 terminal/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

Answer 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 好运

如何 post 在 React 上使用 axios 请求

How to post request using axios on react

javascript

api

reactjs

axios