Client-Side
Server-Side
Request
Response
HTTP stands for Hyper Text Transfer Protocol, which is the protocol we follow for transferring information over the internet. The (S) stands for secure. HTTP requests are made using URL's.
URL stands for Uniform Resource Locator, and is a mixture of three parts that make up an HTTP request:
https://devmountain.com/about.html
Protocol, either HTTP or HTTPS
Domain
Endpoint
API stands for Application Programming Interface, and is a place to send and retrieve data from a server. REST is a design concept for transferring data. To make an API RESTful, it must be able to be interacted with in four ways:
GET - Able to Retrieve Data
POST - Able to Add Data
PUT - Able to Update Data
DELETE - Able to Delete Data
CRUD is a model that follows the REST concept. It is an acronym that consists of all the things you need to make an API complete:
CREATE (POST)
READ (GET)
UPDATE (PUT)
DELETE (DELETE)
Axios is a library that helps structure http requests. To set up Axios for your project, you need to install it:
npm install axios
Next, import axios to the component that is making the HTTP Request:
import axios from 'axios';
To structure an HTTP request with axios, reference axios and then the REST method for the request. Passed in as an argument to the method is the url that you are requesting:
axios.get('http://swapi.co/api/people/1')
use axios
REST Method
Requested URL
When the request is made, a promise is returned. A promise is a special object in JavaScript that will hold the response from our request. To handle this promise, we can use a .then and .catch method for if the request is successful or not.
axios.get('http://swapi.co/api/people/1')
.then(response => {
console.log(response.data)
})
.catch(error => {console.log(err)})
Successful Request Functionality
Failed Request Functionality
Sometimes you need to request more specific information, like a specific profile on a social media platform. This is where params, queries, and the body object come in.
Params stands for parameters, and are a way to request more specific information. Params are added to the back of the url, separated with a '/' slash.
Endpoint
https://swapi.co/api/people/1/
Param
The above example would grab the person with the ID of 1 from swapi.
Queries are another way to request specific information in a URL. They are started by the '?' symbol, and then given a key value pair: The key being what data you're looking for, and the value being the specific value(such as an ID or name)
Endpoint
http://example.com/people/?name=matt
Query
The above example would request a person with the name of Matt
The Request Body is another way we can send additional information. The Request Body is an object that is not part of the URL, but included after the URL in a request. It is a great option for adding or updating data.
URL
axios.post('https://example.com/people', {name: 'Matt', age: 27})
Body
The above example would add a person with the information in the body object.
JSON stands for JavaScript Object Notation, and it is the language of servers. It allows us to transfer information between languages. It looks similar to an object, but all keys are wrapped in quotes.
{
"name": "tayte",
"age": 22,
"hobbies": [
"snowboarding",
"video games",
"cars"
],
"car": {
"make": "subaru",
"year": 2014
}
}