React Four
HTTPS, REST, Axios
How the Web Works
Client-Side
Server-Side
Request
Response
What is HTTP(S)?
HTTP stands for Hyper Text Transfer Protocol, which is the protocol we follow for transferring information over the internet.
The (S) stands for secure. More specifically, your webpage is using a SSL, or Secure Sockets Layer. The layer encrypts your http requests.
HTTP requests are made through URL's.
Structure of 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
REST and RESTful API's
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
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: Setup
Axios is a library that helps structure http requests. To use Axios in your project, you need to install it:
npm install axios
Next, import axios to the component that will be making the HTTP Request:
import axios from 'axios';
Axios: Implementation
To create an HTTP request with axios, reference axios, and then invoke the RESTful method for the request.
The first argument passed into the method should be the URL you are making the request to:
axios.get('http://swapi.co/api/people/1')
use axios
REST Method
Requested URL
Axios: Implementation
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 promises, we use the .then( ) and .catch( ) methods that fire depending on whether the request was 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
Sending Additional Information
Sometimes you need to request more specific information, like a specific profile on a social media platform.
This is where params, query, and the body object come in.
http://example.com/people/1
http://example.com/people/?name="Matias"
axios.post('http://example.com/people', {name: 'Matias', age: 26})
params:
query:
body:
Params
Params is short for parameters.
Params are a way to request more specific information from an API.
Params are added to the end 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.
Query
Queries are another, more dynamic way to request specific information from an API.
A query is started with the '?' symbol, followed by key value pairs separated by the = sign. Multiple queries can be separated with the & sign.
The key is what data you're looking for, and the value is the specific value for that type of data (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 from example.com
The Request Body
The request body is another place we can use to send additional information to an API.
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. (Think CRUD!)
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
JSON stands for JavaScript Object Notation.
JSON is the preferred format for sending data across HTTP requests.
JSON allows us to transfer information across different languages.
JSON looks similar to a JS object, but all keys are wrapped in double quotes.
{
"name": "Cole",
"age": "7 emotionally",
"hobbies": [
"wearing hats indoors for some reason",
"video games"
],
"car": {
"make": "Toyota",
"year": 2017
}
}
React 4
By matias_perez
React 4
HTTPS, REST, CRUD, Axios, and Asynchronous/Synchronous Code
- 235