Scribd
Upload
8 views

API in JS

Uploaded by

Shivam Pandey
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
8 views

API in JS

Uploaded by

Shivam Pandey
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 10

JavaScript tips

API Basics in
JavaScript
Quick & Easy Guide for Beginners!

{ API }

Js

Slim toumi
Slim toumi
JavaScript tips

What is an API ?
An API (Application Programming Interface) allows applications to talk
to each other. For example, your JavaScript application can use an API
to fetch data from a server or a database and display it on a website.

For example, if you want to display live weather information on your


website, you can use a weather API to get up-to-date data.

Application Server / DataBase

How to Fetch Data ?


To fetch data in JavaScript, we use the fetch() function. It sends a
request to the API and allows you to handle the response, making it
easy to retrieve and work with data from different sources in just a
few lines of code.

Slim toumi
Slim toumi
JavaScript tips

Making a GET Request (Retrieving Data)


The fetch() function returns a Promise, which represents a task that may
finish later. You can handle this with .then() and .catch() to handle success
and error.

Explanation :
fetch('URL'): This makes a request to the URL.
.then(response => response.json()): Converts the response to JSON format so
we can easily use it.
.then(data => console.log(data)): Logs the data in the console to check it.
.catch(error => console.error('Error:', error)): Catches any errors (e.g., if the API is
down).

Slim toumi
Slim toumi
JavaScript tips

Making a POST Request (Sending Data)


To send data, use the POST method with fetch(). This is often used to add
new data to a database.

Explanation :
method: 'POST': Specifies we are sending data to the server.
headers: Tells the server what type of data to expect.
body: This is the data we’re sending, converted to a JSON string using
JSON.stringify().

Slim toumi
Slim toumi
JavaScript tips

Making a PUT Request (Updating Data)


A PUT request is used to update existing data on the server. It’s similar to a
POST request but typically used to modify or replace data.

Explanation :
method: 'PUT': Specifies an update request.
headers: Tells the server what type of data to expect.
body: Contains the new data you want to update, converted to a JSON string.
id: In https://api.example.com/data/1, the number 1 represents the unique ID of
the specific item you want to update. The server uses this ID to identify exactly
which item in its database needs to be modified.

Slim toumi
Slim toumi
JavaScript tips

Making a DELETE Request (Removing Data)


A DELETE request is used to remove data from the server. This is useful for
deleting specific items by their unique ID.

Explanation :
method: 'DELETE': Specifies a delete request to remove data..
id: In “ https://api.example.com/data/1 “ , the number 1 represents the unique ID
of the specific item you want to delete. The server uses this ID to locate and
remove the correct item from its records, ensuring only the specified data is
deleted.

Slim toumi
Slim toumi
JavaScript tips

Passing Query Parameters in a URL


Query parameters are a way to pass information to the API, often used for
searching or filtering data. These parameters are added to the URL after a ? .

Explanation :
query=${searchQuery}: Here, query is the key, and ${searchQuery} is the value
(in this case, "javascript"). Adding ?query=javascript to the URL tells the server
that we want to search specifically for "javascript".
Query Parameters: These are key-value pairs added to the URL after a ?. They let
you send specific details to the server, like search terms or filters, to refine the
results. For example, ?query=javascript tells the server to filter results based on
"javascript".

Slim toumi
Slim toumi
JavaScript tips

Error Handling
When making requests, things can go wrong, such as network issues or
server errors. You can handle these potential issues by checking the
response status and using .catch() to log any errors.

Explanation :
if (!response.ok): Checks if the server’s response status is not OK (e.g., 404 or
500).
throw new Error: Creates a new error if the response isn’t OK, stopping further
execution.
.catch(error => ...): Catches and logs any errors from the fetch request, making
them easy to troubleshoot.

Slim toumi
Slim toumi
JavaScript tips

Using async and await


Using async and await makes your code look cleaner and easier to read
when handling asynchronous requests like fetch().

Explanation :
async: Marks the function as asynchronous, allowing you to use await inside.
await: Pauses execution until the fetch or JSON conversion is complete.
try and catch: Catches and handles any errors, ensuring they don’t break the
app.

Slim toumi
Slim toumi
JavaScript tips

Hopefully You Found It


Usefull!
Be sure to save this post so you
can come back to it later

like Comment Share

You might also like