Seperate axios api in React

Question

I am new in React. How can I separate the API file in react. I would like to do like that=>

My costcenter_api file=>

import axios from 'axios';

function getallcostcenter(){
    try{
        const res =axios.get('http://127.0.0.1:8000/api/costcenters_mas/');
        const data = res.data;
        console.log(data);
        return data;
    }
    catch(e){
        console.log(e);
    }
}

export default getallcostcenter;

At main js=>

import costcenter_api from '../../api/costcenter_api';

this.setState({          
      costcenters : costcenter_api.getallcostcenter() // I would like to call something like that
    });

How can I achieve this one?

yes, I have to use .then() . I just have idea don't know how to do that. — lwin, Aug 07 '19 at 08:07
Possible duplicate of [How do I return the response from an asynchronous call?](https://stackoverflow.com/questions/14220321/how-do-i-return-the-response-from-an-asynchronous-call) — Quentin, Aug 07 '19 at 08:50

score 0 · Answer 1 · answered Aug 07 '19 at 08:12

0

If you are confused about .then() and .catch(), you could use a simpler method that was made to do the same thing but have it be easier to read. It's called Async/Await.

answered Aug 07 '19 at 08:12

albert_anthony6

594
2
9
30

Hurobaki · Answer 2 · 2019-08-07T08:46:21.987

0

First you can use ES6 syntax with async / await If you don't know what it is : https://codeburst.io/javascript-es-2017-learn-async-await-by-example-48acc58bad65

import axios from 'axios';

export const getHttp = async (url, id = "") => {

  try {          
    const res = await axios.get(`${url}/${id}`);          
    const data = await res.json();
    return data;
  } catch(e) {          
    console.log(e);
  }
}

And in your main.js file :

import { getHttp } from '../../api/costcenter_api';
import { config } from '<config path>';

async componentDidMount() {
  const costcenters = await getHttp(config.costcenters);

  this.setState({ costcenters })
}

Because your method is asynchronous you can't call it directly inside you setState method.

If you don't want to keep URL in your main.js file, you can create a config.js file like this :

export const config = {
  costcenters: "http://127.0.0.1:8000/api/costcenters_mas"
}

Or you can create a const url = "http://127.0.0.1:8000/api/costcenters_mas"inside your api file.

edited Aug 07 '19 at 08:46

answered Aug 07 '19 at 08:21

Hurobaki

3,728
6
24
41

So how can i do if i have more function like, getcostcenterbyid(),getcostcenterbyname() .etc how can i call this method in main.js? – lwin Aug 07 '19 at 08:28
You can pass options to your `axios` http get method. I will update my answer if you provide more details. How would you like to call this method in your `main.js`file ? What's your URL for getcostcenterbyid(),getcostcenterbyname() ? – Hurobaki Aug 07 '19 at 08:31
my idea is I would like to remove all of Axios request in main.js and all of the api requests will be their specify file and I will call from main.js. But how to call axios request from main.js. this is my problem. I don't want to keep any url in main.js and all of data request things will be inside api file. – lwin Aug 07 '19 at 08:36

Seperate axios api in React

2 Answers2