如何使用使用<strong>axiox</strong>上<strong>reactjs</strong></p> <p>我建立一個簡單的<strong>待辦事項應用</strong>反應

Question

如何POST請求愛可信發佈請求。我使用MongoDB的和的NodeJS爲後端和reactjs爲前端。 現在我需要知道如何post request using axiox on reactjs。因爲我想將所有數據存儲在我的服務器上。我爲此做了一個crud api。

謝謝:)

Answer 1

我假設你提的，而不是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

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.catch（err => {console.log（err）}），所以它使調試更容易。響應以對象的形式傳遞給函數，以便您可以使用。符號來訪問該對象中的各種事物。我用axios掙扎了一下，我一直在閱讀它，但在某些情況下需要{data}這樣的一些奇怪的規則。我希望有人提出一個更好的答案。 axios是一個非常好的工具，當你有很多API請求同時發生時，它確實有用。您可以使用axios.all（）在同一時間

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

這段代碼只是將在同一時間，可以在某些情況下方便您的所有要求做的所有請求。繼續閱讀文檔並嘗試一下。我發現將斷點放入並觀察請求在Chrome中的Network選項卡中查看以及在Sources選項卡中查看代碼的解釋方式以及觀察值逐行更改很有用。在React中使用的一個好工具是MobX，它只是一個狀態管理工具，它非常有趣，並且在eggheads.io上有一個很好的課程，德國人很好地解釋了一些事情。祝您好運React