Full Stack Fundamental

API

API stands for application programming interface, they are like a waiter which generate response as per our request. It is interface for interaction between two software. Those API which uses http or in simple handle internet based things are called as Web API's.API act as URL or endpoint for particular service. In some cases URL is normal means they don't have key( valid password or in technical terms an authenticator or token to use API ) neither they are paid they are called as free API.

First of all here is quick look how request and response model work:- if we want to open amazon website for purchasing something then we write URL of amazon website on google which request the amazon server for particular service further that server generate response in the form HTML, CSS, JS code which is rendered at last by our browser to show the amazon website.

but regarding the usage of API, we as user not access the amazon server directly instead we use their server API for own work and the response which is generated by the API is in form of raw data format called as JSON(Javascript object notation)

Some random API example:-

• https://developer.x.com/en/docs/twitter-api:- we can make bot account on twitter using this API, we can reply or tag someone without creating account etc.

• https://catfact.ninja/facts:- facts regarding cat.( You can see particular format in which page is written that's is JSON )

• https://developers.google.com/maps:- google map API.

JSON

JSON stand for JavaScript object notation which is just a format of displaying data. JSON internally uses Javascript object where their keys are of type string. For more insight check this one https://www.json.org/json-en.html. To check whether particular JSON is correct or not we use validator example https://jsonlint.com/

Before JSON, API generate response in the form of XML. For more insight you can check out this one https://www.imaginarycloud.com/blog/json-vs-xml

Accessing data from JSON

Generally all the response generated by the API is in form of JSON which holds all data in the string type data. So we require to convert that data in our desired format using methods few of the them are:-

• JSON.parse(data) - to parse or convert JSON data into JS objects

• JSON.stringify(json) - to parse a JS object into JSON data.

Testing API request

Generally we use the URL of particular API in the browser to test or we can say that usage of API. But this is not a efficient way to be used by developer to test their API, they use tools such as -hoppscotch, postman.

text bar ro the right of GET text is where we write the API endpoint or URL , then we click send to generate the response which is shown below

One thing to remember is that these tool are used at developer end for testing API they are not used at user end.

Ajax

Ajax stands for asynchronous javascript and XML. It is process used by JSON to receive the request and generate response.

Earlier when we send request from our Javascript code to API, API further generate response in the form of XML. This whole process or request and response is asynchronous in nature. Hence it is called as Ajax.

Http Verbs

Whenever we send request on http we use different verbs to perform functionality such as GET ( to receive data ), POST( to send data ), DELETE( to remove data).

Status Codes

Different codes are used to show response generated by API some of them are:-

• 200:- OK

• 404:- Not Found

• 400:- Bad request

• 500:- Internal Server error.

Status Code

Adding Information in URLs

Adding additional information in the end point of an API.

?name=faraz&marks=100

You can play with this api https://api.potterdb.com/v1 in the postman to get more clearity. We can add additional information in two ways one that is using Query string manually using key value pair or we can use different routes in form of variables.

When we send some key-value pair in API which not make sense then, then API ignore that key value pair.

http headers

headers are also used to send additional data to the API. They are in form of key-value pairs.

Try to open google browser and write some keyword to search to search and then visit the console and click on network tab on left side you can see many request and when we click on particular request we can see header information about particular request.

There are two types of headers :- request header and response header.

meta data also send with http headers.

https://icanhazdadjoke.com/

First Request

Before fetch() people uses XMLHTTPRequest() to send data however it has many drawbacks that they are not asynchronous in nature and we cannot use promises with them.

Now use use fetch() to send request, by default fetch() return promises in the form of response, we use promises method to work with API response.

let url = "https://catfact.ninja/fact";
fetch(url).then((response) => {
  console.log(response);
}).catch((err) => {
  console.log("Error:- ", err);
})

Output:-

to see data in readable format we use response.json() method.

Let's see how

let url = "https://catfact.ninja/fact";
fetch(url).then((res) => {
  return res.json();
}).then((data) => {
  console.log("data 1 :- ", data.fact);
  return fetch(url);
}).then((res) => {
  return res.json();
}).then((data2) => {
  console.log("data 2:- ",data2.fact);
}).catch((err) => {
  console.log("Error:- ",err);
})

Output

using fetch with aysnc/await.

let url = "https://catfact.ninja/fact";
async function getFacts() {
  let res = fetch(url);
  console.log(res);
}
getFacts();

when we run this code promise can take time to generate response so it can be undefined but here process is so fast that we cannot se undefined and immediately promise state is change from undefined to fulfilled, to avoid the case we use await

let url = "https://catfact.ninja/fact";
async function getFacts() {
  let res =  await fetch(url);
  console.log(res);
}
getFacts();

again to read data in a desired format we use .json() method

let url = "https://catfact.ninja/fact";
async function getFacts() {
  let res =  await fetch(url);
  let data = await res.json();
  console.log(data.fact);
}
getFacts();

Sometime we can insert wrong url in the fetch()

let url = "https://catfact.ninja/fact2";
async function getFacts() {
  let res =  await fetch(url);
  let data = await res.json();
  console.log(data.fact);
}
getFacts();

we use try-catch to deal with error.

let url = "https://catfact.ninja/fact2";
async function getFacts() {
  try {
    let res =  await fetch(url);
    let data = await res.json();
    console.log(data.fact);
  } catch (err) {
    console.log("Error:- ",err);
  }
}
getFacts();

Now to write multiple async call use promise chaining

let url = "https://catfact.ninja/fact";
async function getFacts() {
  try {
    let res =  await fetch(url);
    let data = await res.json();
    console.log(data.fact);
    let res2 = await fetch(url);
    let data2 = await res2.json();
    console.log(data2.fact);
  } catch (err) {
    console.log("Error:- ",err);
  }
}
getFacts();

Axios

Library to make http request in a better way. Axios also return promise. fetch() return data but it is not is readable format we have to parse it to json format, but in axios we get data in readable format directly parsing not required.

Note:- Do not use loop to call API's

Installation

let url = "https://catfact.ninja/fact";
/* axios code  */
async function getFacts() {
  try {
    let res = await axios.get(url);
    console.log(res);
  } catch (err) {
    console.log("Error:- ", err);
  }
}
getFacts();

Axios with headers

const url = "https://icanhazdadjoke.com/";
async function getJokes() {
  try {
    let res = await axios.get(url);
    console.log(res.data);
  } catch (err) {
    console.log(err);
  }
}

getJokes();

Above code will be generating data in the html format as show below

To get data in the json format we use headers together with response

const url = "https://icanhazdadjoke.com/";
async function getJokes() {
  try {
    const config = { headers: { Accept: "application/json" } };
    let res = await axios.get(url, config);
    console.log(res.data);
  } catch (err) {
    console.log(err);
  }
}

getJokes();

Updating Query String in axios

Node js

It is a runtime environment, used for server side programming.

node REPL

REPL stands for read-evaluate-print-loop , used to write node code.

window object ~ global object in node js.

Node files

to run file with node we must have correct directory then to run write "node file_name"

Process

this object provide information about and control over the current Node.js process

process.argv:- returns an array containing the command-line argument passed when the Node.js process was launched. When we want to pass additional information together with "node file_name" command we use process.argv.

module.exports

require():- a built in function to include external modules that exists in separate file. They particularly search for index.js file as an entry point.

module.exports():- a special object, by default they send empty object( { } );

NPM

npm is the standard package manager for Node.js file. It is like a library of package. Package is code written by someone to perform some functionality we can easily use them in our code through npm. It is command line tool to manage our packages. It comes preinstalled with node.

node_modules:- folder which contain every installed dependency for your project.

package-lock.json:- it records the exact version of every installed dependency including its sub-dependencies and their version.

package.json:- it contains descriptive and functional metadata about a project. such as name, version, and dependencies.