DEV Community

Create an awesome JS API interface using Fetch (in less than 50 lines)

Eddie on October 11, 2019

In this tutorial, we will create a single reusable module that can perform all of our API calls in less than 50 lines of code! (Jump to final modul...
Collapse
 
mvasigh profile image
Mehdi Vasigh • Edited

You need to make sure you're encoding your query parameters as URI components :) nice article!

Next steps I would take to expand this would be thinking about how you can allow headers to be configured on a per request basis, adding things like interceptors and support for form-data requests, canceling requests, and so on.

Collapse
 
kaos profile image
Kai Oswald

Wouldn't you need to await though?

const books = await Fetch.get('/books');
Collapse
 
eaich profile image
Eddie

Yes you're right! Sorry I forgot this very important aspect. And the call needs to be wrapped inside an async function. I've corrected the code examples. Thank you!

Collapse
 
joshuaneidich profile image
Joshua Neidich

In the final version, I see export default {
get,
create,
update,
remove
}; In the examples I see import of Fetch and you're using Fetch.get. Is it better to export default or export as a named class?

Collapse
 
eaich profile image
Eddie

That's entirely up to you. Personally, I like to use export default in this instance to provide context. Fetch.get() adds some clarity to my code, but that's just my opinion:

import { get } from './Fetch.js';
get(url); // function name is too ambiguous

// vs.

import { get as getData } from './Fetch.js';
getData(url); // better, but still a bit ambiguous. Might have another function in my module named getData()

// vs.

import Fetch from './Fetch.js';
Fetch.get(url);

Collapse
 
joshuaneidich profile image
Joshua Neidich

Thanks for the clarification. How should the export look? The export above is written as: export default {
get,
create,
update,
remove
};

When I imported Fetch, it wasn't working? Btw, great article!

Thread Thread
 
eaich profile image
Eddie

It should look like this:

import Fetch from './Fetch.js';

Depending on the location of your Fetch.js file, the path could be different.

Collapse
 
wagnerfillio profile image
Wagner Fillio • Edited

Hello!

Suppose I create a BookController and have a function below in this controller:


import Fetch from './Fetch.js';

// GET
async function getAllBooks() {
  const books = await Fetch.get('/books');
}

Could I export this function to call it in another js file?


function getAll() {   
  return getAllBooks();
}

export default {
  getAll,
};

Another thing, is it possible to make the constant books a global variable and export that variable so that I can use it anywhere?

Collapse
 
eaich profile image
Eddie

Yes, you can export it. Regarding global access, I like to create a new module for that. In my case, I called it Store.

// Store.js
const Store = {};
export default Store;

I then include this in my modules whenever I need to access a global variable.

import Store from './Store.js';

export async function getAllBooks() {
  const books = await Fetch.get('/books');
  Store.BOOKS = books;
  return books;
}
Collapse
 
wagnerfillio profile image
Wagner Fillio • Edited

thanks for the return, it was of great help!

Just one more question and I will always be grateful!

Suppose I require the data from bookId = 1 and want to display the attribute data in a Modal component (we can imagine the bootstrap), I would also like to change any value of any field, imagine the title of the book and save next.

In the code below, I'm just giving you an idea! Can you help me organize this code?


function openModal() {
    $("#form").modal({show: true});
}

function objectForm() {
    const id = document.getElementById('id');
    const title = document.getElementById('title');
    const author = document.getElementById('author');

    id.value = Store.BOOK.id;
    title.value = Store.BOOK.title;
    author.value = Store.BOOK.author;
}

// use to save start
// function called by the save button
function saveBook() {
    formObject();    
}

function formObject() {
    const id = document.getElementById('id');
    const title = document.getElementById('title');
    const author = document.getElementById('author');

    Store.BOOK.id = id.value;
    Store.BOOK.title = title.value;
    Store.BOOK.author = author.value;
}
// // use to save end

// GET BY ID
async function getBookById(bookId) {
    const book = await Fetch.get('/books/' + bookId);
    Store.BOOK = book;
    //return book;
    objectForm();
    openModal();
}

Collapse
 
wagnerfillio profile image
Wagner Fillio • Edited

Hi, can I resolve the promise this way?

import Fetch from './Fetch.js';

// GET
async function getAllBooks() {
  const books = await Fetch.get('/books')
                        .then(response => {
                          return response.data;
                        });
  return books;
}

Thinking about it, what is the best way to do this?

I want to call this function in another file, but I would like the promise to be resolved

Collapse
 
eaich profile image
Eddie

You can import this file for use in another file. First you will need to export that function. You can do using a number of ways, but here's a way using named export:

export async function getAllBooks() {
...
}

Then in your other file:

import { getAllBooks } from './Books.js';

async function myCall() {
  const response = await getAllBooks();
  console.log(response);
}
Collapse
 
jterranova profile image
j-terranova

I am having trouble using this for creates and updates. The create works fine when using a form object but if just sending a regular object there is a problem. On the client side:
try {
let response = await Fetch.create(
"/api/frameworks/userrunstatus/by/" + userId.userId,
frameworkUserRunStatus,
credentials
);
console.log("api-constructAssociation - response = ", response);
return await response;

I was expecting to have a request object (options or params) that I could read the, frameworkUserRunStatus object, on the server side but I could not. What is the object that I read in the controller on server side?

const create = async (req, res) => {
console.log("Server Side - frameworkUserRunStatus.controller - create start ");

console.log(
"Server Side - frameworkUserRunStatus.controller - inside try create after start, req.params = ",
req.params
);

/*
console.log(
"Server Side - frameworkUserRunStatus.controller - inside try create after start, req.options.body = ",
req.options.body
);

console.log(
"Server Side - frameworkUserRunStatus.controller - inside try create after start, req.options.json()= ",
req.options.json()
);
*/

const newFrameworkUserRunStatus = new FrameworkUserRunStatus({
})

Collapse
 
paul_melero profile image
Paul Melero

I think it'd be useful to include in the Error handler the actual error message returned by the api (on response.status !== 200) 😉

Collapse
 
zoldbogar profile image
zoldbogar

I would have prefered the objectToQueryString to be included in the fetch library...

Collapse
 
wagnerfillio profile image
Wagner Fillio • Edited

Hello, can you explain how I could upload an avatar image associated with json data?

There may be cases where the form can contain an avatar, such as a user form, and there can be cases where the form can only contain data without an avatar.

Collapse
 
aleksandar874 profile image
aleksandar87

create,
read,
update,
delete

instead of

get,
create,
update,
remove

Collapse
 
eaich profile image
Eddie

Read is a great alternative instead of get. Unfortunately, "delete" is a reserved keyword in JavaScript.

Collapse
 
aleksandar874 profile image
aleksandar87

I do it similarly on my daily job.

Simplified structure:

book/
create
read
update
delete

books/
available
availableByType
specific

Thread Thread
 
eaich profile image
Eddie

Oh I see. Yes, that's a good solution too. Thanks for sharing.

Collapse
 
ogaston profile image
Omar Gaston Chalas

Good article Ed, i used a very similar interface my current project. The only difference is that i didnt use the same way to handle the errors,but yours has a good approach.

Collapse
 
webdeasy profile image
webdeasy.de

Awesome! I'll check if I can use this in one of my next projects! ;)

Collapse
 
wagnerfillio profile image
Wagner Fillio

How would you handle file uploads?