IAP 2024 Day 3 - Intro to APIs and Promises

Client and Server

Clients: browsers
Server: The devices that holds your site's information

What is Http

It's short for HyperText Transfer Protocol
You've been using Http requests and responses this whole time
HTTPS is HTTP Secure
- HTTP Secure uses encryption to secure the data being transferred

HTTP Format

Target and Query Params

HTTP Methods

GET: gets data
POST: sends data, often creates change or new data
PUT: replaces data
DELETE: deletes data

The rest can be found here

Body

Response

Status Codes

404: Not Found
400: Bad Request
500: Internal Server Error
200: OK
1xx: Informationa
2xx: Success
3xx: Redirection
4xx: Client Error
5xx: Server Error

look up here

Headers and Body

APIs

"Application Programming Interface"
Simply a set of endpoints a service allows to make requests to
Companies may provide APIs to allow developers to access their services

The Purpose of API

You need to access data
You're not going to access data on servers directly, that's both extremely inconvenient and a security nightmare
- What if we want to access our own private data?
- Shouldn't be able to access others' private data: API keys / authentication!
APIs provide structured places(endpoints) for you to send requests to!
Now you can do a bunch of things, simply by asking the right people very nicely.

What does API output

Where does the input go? -> URL

- GET /api/add
    - Input:{a: number, b: number}
    - Output: {result: number}
        - Result will be mapped to a+b
- GET /api/add?a=5&b=8
    - What does this output?
        - {result: 13}

Endpoints

For example in the domain of zzzhxxx.top, the endpoint is /api/stories , /api/story and '/api/comment'

By accessing a URL, you are making a request to an endpoint
GET zzzhxxx.top/api/stories, a GET request for all stories
POST zzzhxxx.top/api/story, a POST request to create a new story
Multiple endpoints can exist under the same URL, but are differentiated based on the type of request
zzzhxxx.top/api/comment, gets or adds a comment based in GET or POST

Preview of Making Requests to APIs in Javascript

get and post are functions actually using the fetch function

get("/api/getUserNumber",{
    phoneNumber: "1234567890"
});

GET
/api/getUserNumber?phoneNumber=1234567890

post("/api/addUser",{
    name: "Yoda Yuki",
    group: "Nogizaka46",
    phoenNumber: "1234567890"
});

POST /api/addUser
Params:{
    name: "Yoda Yuki",
    group: "Nogizaka46",
    phoenNumber: "1234567890"
}

The return type of the get function is actually a PROMISE

Promises

Promises allow for asynchronous processing

.then()

get("/api/stories").then((storyObjs) => {
    setStories(storyObjs);
});

Once the promise is fulfilled, do stuff(call a callback function).
Returns a promise

.catch()

get("/api/stories").then((storyObjs) => {
    setStories(storyObjs);
}).catch((err) => {
    console.log("Error:", err);
});

Once the promise is rejected, do stuff(call a callback function).
Returns a promise

Examples

The promise below is going to reject

const f = (promise) =>{
    promise.then((val) => console.log("a")).then((val) => console.log("b")).catch((err) => console.log("error!"));
};

const promise = /* Some way of getting a proise that will reject*/
f(promise)

The resopnse will be:

"error!"

The promise below is going to resolve after a little while

const f = (promise) =>{
    promise.then((val) => console.log("a")).then((val) => console.log("b")).catch((err) => console.log("error!"));
};

const promise = /* Some way of getting a promise that will accept */
f(promise)

console.log("Hi there!");

The response will be: