How to get API using Fetch?

If you are learning how to import a data to your websites, you can't avoid using "Fetch" method. Today, I would like to share how Fetch imports data in Javascript.
index

1. What is Fetch?
2. Words which you need to know before read
3. How does Fetch work
4. Check the code(How to fetch API)

1. What is Fetch?
In JavaScript, the fetch() method is used to make asynchronous requests to the server and load the information that is returned by the server onto the web pages. The request can be of any type of API that returns the data in JSON or XML. The fetch() method requires one parameter, the URL to request, and returns a promise.

2. Words which you need to know before read

-Asynchronous processing
A process or function that executes a task "in the background" without the user having to wait for the task to finish. The promise and async / await are objects returned by an asynchronous function.

-API(Application Programming)
Interface can be thought of as a contract of service between two applications. This contract defines how the two communicate with each other using requests and responses.

-JSON(JavaScript Object Notation)
More commonly known by the acronym JSON, is an open data interchange format that is both human and machine-readable.

-Dictionary
A dictionary is a general-purpose data structure for storing a group of objects. A dictionary has a set of keys and each key has a single associated value.

// Dictionary
const array1 = {'Bob:1', 'Tom:2', 'Sum:3'}

3. How does Fetch work
Here is a Fetch syntax.

fetch('http://example.com/movies.json')
  .then((response) => response.json())
  .then((data) => console.log(data));

First of all, write URL link of API inside of fetch(). fetch() returns a promise, whch means you can use then() or async / await for returning data. In this case, I used then() method.

4. Check the code(How to fetch API)
Let's see how to fetch API.

fetch('http://example.com/movies.json')
 .then(response => {
    return response.json()
})
 .then(data => {
    console.log(data)
})
 .catch(error => {
    console.log(error)
})

First, URL is compiled as JSON data by return response.json(). JSON data returns data as Dictionary. So when you check inside of JSON file, data is compiled like this style.

//JSON
{
  "id": 1,
   "name":"example"
}

Second, if Internet doesn't work when you execute, catch method works insted of then(). And then console displays "error" message. Thus catch method works for error.

 .catch(error => {
    console.log(error)
})

Finally, if fetch works sucessfully, then() method works. return response.json() is changed "data" by then() method. Thus if we check console, it shows JSON data on console log, which means it successed to fetch.

 .then(data => {
    console.log(data)
})