Translating Axios Methods to Fetch

Question

I am having trouble finding a way to translate the below methods written with Axios to fetch.

import axios from 'axios';

const url = 'http://localhost:5000/api/posts/';

The URL is running from port 5000 from my server using 'npm run dev'

class PostService {

//Get Posts
static getPosts() {
    return new Promise(async (resolve, reject) => {
        try {
            const res = await axios.get(url);
            const data = res.data;
            resolve(
                data.map(post => ({
                    ...post,
                    createdAt: new Date(post.createdAt)
                }))
            );
        } catch (err) {
            reject(err);
        }
    })
}

The above is using a promise and axios to map the data

//Create Posts
static insertPost(text, topic, price, location, provider, review) {
    return axios.post(url, {
        text,
        topic,
        price,
        location,
        provider,
        review
    });
}

The above is returning the data using axios

//Delete Posts
static deletePost(id) {
    return axios.delete(`${url}${id}`);
}

}

The above is finding ID of DB entry and using axios to delete it.

export default PostService;

A few things but there is no clear tutorials on the conversion hence why i'm in doubt. — Isaac Burlò, Jan 28 '20 at 21:52
https://stackoverflow.com/questions/40844297/what-is-difference-between-axios-and-fetch — episch, Jan 28 '20 at 22:09

score 0 · Answer 1 · answered Jan 28 '20 at 22:08

First things first! What's that first abomination?

either with Promises

static getPosts() {
  const turnCreatedAtToDate = post => ({
    ...post,
    createdAt: new Date(post.createdAt)
  });

  return axios.get(url)
              .then(data => data.map(turnCreatedAtToDate));
}

or full async

static async getPosts() {
  const data = await axios.get(url);
  return data.map(post => ({
    ...post,
    createdAt: new Date(post.createdAt)
  }));
}

But don't collect all antipatterns in reach, put them in a bowl stir frantically and pour that then into a function.

Back to topic

fetch is a bit more verbose:

class PostService {
  //Get Posts
  static async getPosts() {
    const response = await fetch(url);
    const data = await response.json();

    return data.map(post => ({
      ...post,
      createdAt: new Date(post.createdAt)
    }));
  }

  //Create Posts
  static insertPost(text, topic, price, location, provider, review) {
    return fetch(url, {
      method: "POST",
      headers: {
        "Content-Type": "application/json"
      },
      body: JSON.stringify(text,
        topic,
        price,
        location,
        provider,
        review
      })
    );
  }

  //Delete Posts
  static deletePost(id) {
    return fetch(`${url}${id}`, {
      method: "DELETE"
    });
  }
}

Thank you for your responses, I used a combination of both and the descriptions are good! — Isaac Burlò, Jan 28 '20 at 22:45

score 0 · Answer 2 · answered Jan 28 '20 at 22:10

Fetch is quite similar to axios so the transition is not that different:

A general approach with JSON response:

  try {
    const url = 'http://localhost:5000/api/posts/';
    const response = await fetch(url);
    const jsonData = await response.json();

    console.log(jsonData); // Do whatever you want with the JSON response...
  } catch (error) {
    console.error(error)
  }

If we would apply for your function should be something like this:

//Get Posts
static getPosts() {
    return new Promise(async (resolve, reject) => {
        try {
             const url = 'http://localhost:5000/api/posts/';
             const response = await fetch(url);
             const data = await response.json();

             resolve(
                data.map(post => ({
                    ...post,
                    createdAt: new Date(post.createdAt)
                }))
            );
        } catch (err) {
            reject(err);
        }
    })
}

And now for the post:

//Create Posts
static insertPost(text, topic, price, location, provider, review) {

    const formData = new FormData()
    formData.append('text', text);
    formData.append('price', price);
    formData.append('location', location);
    formData.append('provider', provider);
    formData.append('review', review);

    try {
        const response = await fetch(url, { method: 'POST', body: formData });
        const jsonResponse = await response.json();

        return jsonResponse;
    } catch (error) {
        console.error(error)
    }
}

And for delete

//Delete Posts
static deletePost(id) {
    return fetch(`${url}${id}, {method: "DELETE" });
}

Translating Axios Methods to Fetch

2 Answers2

Back to topic