# HTTP Methods

### GET:

This HTTP Verb is used when you want to retrieve data from an API, essentially a literal get, getting data or some data from the API endpoint. Take a look at this example:

```javascript
fetch('https://jsonplaceholder.typicode.com/todos/1') // Getting a todo of id 1
      .then(response => response.json())
      .then(json => console.log(json))
```

```javascript
{
  "userId": 1,
  "id": 1,
  "title": "delectus aut autem",
  "completed": false
}
```

Notice that it returns an object that has `userId`, `id`, `title`, and `completed` properties. At this point, we can then display the data, and manipulate or validate data.

### POST:

This HTTP Verb is different from the previous one, what this does do? Well, it simply means that you’re going to create a new resource on the server, typically along with this request you need to embed an Authorization Token to check whether you’re authorized to create a new resource and the data you want to insert or to be created. The data can be in the form of `JSON` or `XML`.

```javascript
fetch('https://jsonplaceholder.typicode.com/posts', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify({
    title: 'Post Title',
    content: 'Post content sample'
  })
})
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error('Error:', error));
```

This will create a new post with `title` of 'Post Title' and `content` of 'Post content sample'.

### PUT:

On the other side of the coin, there’s a `PUT` HTTP Verb. This one is somewhat the same as `POST` Request with a key distinction that `PUT` does modify an existing resource. Conversely, on `POST` it does create a new resource. Note that this method is generally used when you want to replace all data of existing data with new data.

```javascript
fetch('https://jsonplaceholder.typicode.com/posts/', {
  method: 'PUT',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify({
    id: 1,
    title: 'Post 1 Sample PUT Request',
    content: 'New Content'
  })
})
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error('Error:', error));
```

Here, we’re editing an existing resource that has an id identifier of 1 changing the title and content to something new embedded in the HTTP body.

### DELETE:

This HTTP Method doesn’t need much explanation as it does a literal delete of a resource or a bunch of resources on the server. Sometimes we put an identifier in the endpoint to tell the API what to delete.

```javascript
fetch('https://jsonplaceholder.typicode.com/posts/1', {
  method: 'DELETE'
})
.then(response => {
  if (response.ok) {
    console.log('Post deleted successfully');
  } else {
    console.error('Failed to delete the post');
  }
})
.catch(error => console.error('Error:', error));
```

### PATCH:

This HTTP Verb is a bit analogous with PUT, in way that it does update an existing resource but only a partial part of it, rather than the entire data of an existing record PUT HTTP does.

```javascript
fetch('https://example.com/users/1', {
  method: 'PATCH',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify({
    email: 'new-email@example.com'
  })
})
```

Here, we’re only updating the email of an existing user with an `id` 1.