DEV Community: Maxim Poyakov

Fetch and HTTP Methods

Maxim Poyakov — Mon, 30 Jan 2023 03:05:08 +0000

What is fetch()?

The fetch() method is a useful tool if you want to use third-party APIs in your website or if you created your own .json file and want to use data from there. The best part about fetch() is that it is an asynchronous function and it will run in the background. For you to fetch all you have to do is to paste a link to an API or JSON server data from which you want to use. After you fetched data successfully you will use .then() and .json() methods to extract JSON body content from the response, after that you can do whatever you want with that data.

Besides .then() you can also use the .catch() method. The catch method is used for error handling, for example, if your fetch was not successful .catch() will “catch” the error and will return it to you. To make it easier to understand if you want to do something when your fetch was not successful you will want to use .catch().

Here is an example of code using fetch, then, and catch methods:

fetch('http://example.com/db.json')
.then(response => response.json())
.then(data => console.log(data))
.catch(() => console.log("Fetch was not successful"))

In the example above we are getting data from a server, which means that we are using the “GET” method, and what it does is that it simply takes data from a server and returns it back to us.

NOTE: You can think about “GET” like a waiter in a restaurant.

But what if we want to send data back to a server? That is where the “POST” method comes up.

What is the “POST” method?

The “POST” method sends data back to a server. If you have your own .json file and you want to create a new object inside of your array you should use the “POST” method. The syntax for “POST” is a little bit more complicated than “GET”, but I will explain it to you step by step.

First, just like with “GET” you want to use fetch(), to fetch the server or an API, then you will “tell” JavaScript what method you want to use (in our case it is “POST”). Then you will use “headers” to show what type of data you are sending to the server. After that, you will use “body” to stringify and show what data you want to send. To stringify data you will use JSON.stringify() (all data you are sending back to a server must be a string).

It might sound complicated, but after you take a look at the code you will realize that it is not that hard. Here is an example of the “POST” method:

const dataYouWantToSend = {
 name: "John",
 age: 29
}
fetch('http://example.com/db.json', {
  method: "POST",
  headers:{
  "Content-Type":"application/json"
 },
 body: JSON.stringify(dataYouWantToSend)
})

What is the “PATCH” method?

The “PATCH” method can edit data that already exists on your server. If you want to update one of your object’s values, “PATCH” is here for you! Just like with “POST” you have to fetch an API or a JSON server, but when you are using “PATCH” you must specify what object and what value you want to modify. The way you can do that is in your fetch link after your JSON file you will put “/” and then you will type in the ID of the object you want to update.

NOTE: When you are using “PATCH” always use an ID to specify an object, otherwise fetch will throw an error.

This is the only difference in syntax between “PATCH” and “POST” the rest of the code will stay the same. See, not that hard at all! Here is an example of fetch using “PATCH”:

const dataYouWantToEdit = {
 name: "Bob",
 age: 23
}
fetch("http://example.com/db.json/2", {
 method: "PATCH",
 headers:{
   "Content-Type":"application/json"
},
 body: JSON.stringify(dataYouWantToEdit)
})

What is the “DELETE” method?

The “DELETE” method speaks for itself, this method just deletes specific data in your server. The syntax of the “DELETE” method is similar to “PATCH”. All you have to do is in your fetch link specify what object or value you want to delete and then just select the “DELETE” method and you are done. Here is an example:

fetch("http://example.com/db.json/2", {
 method: "DELETE"
})
.then(response => response.json())
.then(data => console.log(data))

As a bonus, I will quickly tell you about HTTP response status codes. There is a lot of them, but as for now, I will tell you about the most common of them.

200 — means that the HTTP request was completed successfully.

304 — means that response has not been modified.

404 — means that server cannot find the requested resource.

500 — means that server has encountered a situation it does not know how to handle.

Object Oriented Ruby

Maxim Poyakov — Mon, 23 Jan 2023 16:59:03 +0000

One of the core features of every programming language is Classes and Objects. Today I will teach you how to declare and use classes in Ruby.

Let’s get started!

Class names should start with an uppercase letter.
To declare a class, add a class keyword, then put a name, and don’t forget to add an end keyword.
Here is how it should look:

class Person

end

To make the process of learning easier you can think about classes like factories, that produce objects.

So now after we declared our class we should make it do something for us.

The first method you should declare is initialize method. What this method does is creates the instances of your object.

Here is an example:

class Person

  def initialize(first_name, last_name, age)
      @first_name = first_name    
      @last_name = last_name
      @age = age
  end

end

p1 = Person.new("Maxim", "Polyakov", 18)
binding.pry

Don’t freak out I will walk you through this code

Once we declared initialize method we added object instances as arguments, in our case it is: first_name, last_name, and age.
To understand the next part, let me explain how can we create a new object, the syntax is super simple, all you have to do is put the name of your class and add .new, then you can put first_name, last_name, and first name in parenthesis.
So, now what is happening inside our initialize method? We are creating instance variables with @ symbol and we assign our arguments to them.
Now after we create our first person we can use pry to see its instances in the terminal.

Now let’s say you want to change the value of an instance. To do that you have to create a setter method and give it the name of the instance you want to change.

class Person

  def initialize(first_name, last_name, age)
      @first_name = first_name    
      @last_name = last_name
      @age = age
  end

 # setter method
  def first_name=(first_name)
      @first_name = first_name
  end

end

p1 = Person.new("Maxim", "Polyakov", 18)
binding.pry

Here we are doing the same thing as in initialize, we are assigning our first_name argument to our object instance.

Cool so now we can change our instances, but what if we want to see them in our terminal? That is where the getter comes into a game. To declare a getter method you can just create a method with the same name as the instance you want to see.

class Person

  def initialize(first_name, last_name, age)
      @first_name = first_name    
      @last_name = last_name
      @age = age
  end

 # setter method
  def first_name=(first_name)
      @first_name = first_name
  end

  # getter method
   def last_name
      @last_name
   end

end

p1 = Person.new("Maxim", "Polyakov", 18)
binding.pry
Yup, getters are that simple, all you have to do is put an instance you want to see in the getter method.

The craziest part about is that you can make setter and getter in on a SINGLE line.

All you have to do is use attr_accessor.

class Person

  attr_accessor :age

  def initialize(first_name, last_name, age)
      @first_name = first_name    
      @last_name = last_name
      @age = age
  end

 # setter method
  def first_name=(first_name)
      @first_name = first_name
  end

  # getter method
   def last_name
      @last_name
   end

end

p1 = Person.new("Maxim", "Polyakov", 18)
binding.pry

Here all you have to do is pass in instances you want to update and see.

This is all you need to know to start using classes in your future ruby projects.

Happy Coding!