Say you are using axios for http calls, I guess it would be smth like this:

api.js:

import axios from 'axios';

import { resolve } from './resolve.js';



export async function login(user, pass) {

  return await resolve(axios.post('http://some-api.com/auth', { user, pass }).then(res => res.data));

}



export async function getUser(id) {

  return await resolve(axios.get(`http://some-api.com/users/${id}`).then(res => res.data));

}



// and so on....

And as he said on the post, If your files starts to get too big, you can create a src/api/ and create separate files like src/api/auth.js, src/api/users.js, etc..

To resolve the promises I like to use the new async/await syntax and wrap it in a little module resolver.js:

export function async resolve(promise) {

  const resolved = {

    data: null,

    error: null

  };



  try {

    resolved.data = await promise;

  } catch(e) {

    resolved.error = e;

  }



  return resolved;

}

And your component smth like:

// ...

componentDidMount() {

  this.getUser();

}



async getUser() {

  const user = await api.getUser(this.props.id);

  if(user.error)

    this.setState({ error: user.error });

  else

    this.setState({ user: user.data });

}

Again, this is something I like to do, I think the code looks clearer, keeping a synchronous structure. But I guess it's perfectly fine to resolve your promises with .then() and .catch() also.

I hope that helped!