Question

如何在 reactjs 上使用 axiox 发布请求

我正在构建一个简单的 todo app 。我对后端使用 mongodb 和 nodejs ，为前端使用 reactjs 。现在我需要知道 reactjs 上如何发布请求 axiox 。因为我想将我的所有数据存储在我的服务器上。我为此做了一个 crud api。

谢谢：）

Answer 1

我假设你提到axios而不是axiox

首先你需要安装axios使用npm的一种方法，从终端/ windows安装它作为dev依赖

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 for error：

  .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％这实际上是如何运作的，但当你使用关键词＆＃34;那么＆＃34;它只是你的标准承诺，在then（）之后有了一个then.catch（err =＆gt; {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好运

如何使用axios发布请求作出反应

2 个答案: