如何在React上使用axios发布请求

Question

how to post request using axiox on reactjs

I am building an simple todo app . I use mongodb and nodejs for the backend and reactjs for frontend . Now i need to know how to post request using axiox on reactjs . Because i wanna stored all my data on my server. I make a crud api for that.

Thanks :)

Answer 1

I'm assuming you are mentioning axios instead of axiox

Firstly you need to install axios one of the ways is using npm , install its as a dev dependency from terminal/windows

npm install --save-dev axios

make sure to add the axios where ever you are making use of axios.

import axios from 'axios';

then you can use whatever request you want use axios for. Below is the code (GET request) from axios npm documentation ,

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

Make sure you add catch for error :

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

You can read more about on axios documentation

If you want to know more about axios go here on Medium

Answer 2

This requires a much more detailed answer. Like what happens when you use arrow functions eg ..

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)}
      })

Im not 100 percent how this actually works but when your using the key word "then" its just your standard promise, after the then() its good to have a then.catch(err => {console.log(err)}) so it makes debugging that bit easier. The response is passed to the function in the form of an object so you can just use . notation to access the various things in that object. Im struggling a bit myself with axios, ive been reading up on it but there are some weird rules like { data } is required in some cases. Im hoping someone comes up with a better answer. axios is a really good tool and really helps when you have lots of API requests going off at the same time. You can use axios.all() to do all requests at the same time

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

this bit of code just sends all your requests at the one time which can be handy in some cases. Keep reading the documentation and trying things out. I found it useful putting breakpoints in and watching the requests come through in the Network tab in chrome and looking at the way the code is interpreted in the Sources tab and watching the values change line by line. Also a good tool im using in React is MobX which is just a state management tool its pretty interesting and there a good course on eggheads.io which some German guy explains things really well. Best of luck with React