Scribd
Upload
10 views

Api

The document discusses two methods for making network requests in JavaScript: the Fetch API and Axios. It highlights the basic usage of both, including GET and POST requests, and compares their features such as error handling, JSON parsing, and browser support. Axios is noted for its additional capabilities like interceptors and broader compatibility with older browsers compared to Fetch.

Uploaded by

gfdjhkjuy1425
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
10 views

Api

The document discusses two methods for making network requests in JavaScript: the Fetch API and Axios. It highlights the basic usage of both, including GET and POST requests, and compares their features such as error handling, JSON parsing, and browser support. Axios is noted for its additional capabilities like interceptors and broader compatibility with older browsers compared to Fetch.

Uploaded by

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

Api

1. Fetch API
The Fetch API is a built-in JavaScript function that provides a simple way to make
network requests. It’s part of the browser's native JavaScript and does not require
any additional libraries.

Basic Example:

// Making a GET request


fetch('https://api.example.com/data')
.then(response => response.json()) // Parse JSON data
.then(data => console.log(data)) // Handle the data
.catch(error => console.error('Error:', error)); // Handle
errors

POST Request Example:

fetch('https://api.example.com/data', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({ key: 'value' }), // Convert data to
JSON
})
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error('Error:', error));

2. Axios
Axios is a third-party library that provides a more powerful and feature-rich way to
handle HTTP requests. It offers additional features like request and response

Api 1
interceptors and automatic JSON data transformation.

Installation:

npm install axios

Basic Example:

import axios from 'axios';

// Making a GET request


axios.get('https://api.example.com/data')
.then(response => console.log(response.data)) // Handle the
data
.catch(error => console.error('Error:', error)); // Handle
error

POST Request Example:

import axios from 'axios';

axios.post('https://api.example.com/data', { key: 'value' })


.then(response => console.log(response.data))
.catch(error => console.error('Error:', error));

Comparison:
Error Handling: Fetch does not reject the promise on HTTP error status codes
(e.g., 404 or 500). You need to check response.ok manually. Axios
automatically rejects the promise for HTTP error statuses.

JSON Handling: Fetch requires manual parsing of JSON data. Axios


automatically parses JSON responses.

Interceptors: Axios supports request and response interceptors, which can be


useful for adding authentication tokens, logging, etc. Fetch does not have
built-in support for interceptors.

Api 2
Browser Support: Fetch is supported in most modern browsers. Axios has
broader compatibility and supports older browsers as well.

Api 3

You might also like