Axios - Revision history

Paabhyan at 20:30, 3 December 2019

2019-12-03T20:30:58Z

← Older revision		Revision as of 20:30, 3 December 2019
Line 1:		Line 1:
	== How Modern UI frameworks like React fetch data from server ==		== How Modern UI frameworks like React fetch data from server ==
	Almost all of the new UI frameworks such as ~~React~~, Angular or Vue use JavaScript templates with JSX, TypeScript or HTML which compile to Single Page Applications. This means once the base 'index.html' page is loaded into the client's browser, no further web page requests are made again to the server. In order to fetch data dynamically as required in reactive manner, asynchronous HTTP requests (AJAX calls) are made, using the RESTful protocol with Get, Post, Delete and Patch methods. These AJAX calls transact in commonly accepted formats like JSON or XML. Once the new data is fetched and available on the client side, the UI frameworks change the components on the web page to display the new data, keeping the web page same. This reduces load on the servers, improves computing performance with CDN caching and eliminates heavy payload responses containing redundant HTML.		Almost all of the new UI frameworks such as [https://reactjs.org/ ReactJS], Angular or Vue use JavaScript templates with JSX, TypeScript or HTML which compile to Single Page Applications. This means once the base 'index.html' page is loaded into the client's browser, no further web page requests are made again to the server. In order to fetch data dynamically as required in reactive manner, asynchronous HTTP requests (AJAX calls) are made, using the RESTful protocol with Get, Post, Delete and Patch methods. These AJAX calls transact in commonly accepted formats like JSON or XML. Once the new data is fetched and available on the client side, the UI frameworks change the components on the web page to display the new data, keeping the web page same. This reduces load on the servers, improves computing performance with CDN caching and eliminates heavy payload responses containing redundant HTML.

	== Why Axios with React ==		== Why Axios with React ==
	ReactJS is a frontend library which has a primary function of rendering elements on the DOM effectively. In order to trim the size and keep the focus on core functionality, ReactJS does not ship with an in-built HTTP client like JQuery. Instead it provides us with a framework to create Components, which can be extended and integrated with third party tools to add more functionality. For example, Redux is a commonly used tool along with React for better State Management. Likewise, Axios is one of the most widely and un-opinionated tool used with React for making HTTP requests. More about it can be found on this [https://github.com/axios/axios link]		ReactJS is a frontend library which has a primary function of rendering elements on the DOM effectively. In order to trim the size and keep the focus on core functionality, ReactJS does not ship with an in-built HTTP client like JQuery. Instead it provides us with a framework to create Components, which can be extended and integrated with third party tools to add more functionality. For example, [https://redux.js.org/ Redux] is a commonly used tool along with React for better State Management. Likewise, Axios is one of the most widely and un-opinionated tool used with React for making HTTP requests. More about it can be found on this [https://github.com/axios/axios link]

	Axios can be easily integrated into any UI framework and its extensible nature and simplicity make it one of the most popular tools used to make HTTP calls following the RESTful protocol. It states clear status messages like 200, 401, 404 etc for all requests and takes care of packing & unpacking of payload responses and its parameters while making HTTP calls. The 'data' field in an Axios response specifies the response payload which is a JSON object that can be easily converted into a JavaScript object in browser and makes the data handling efficient.		Axios can be easily integrated into any UI framework and its extensible nature and simplicity make it one of the most popular tools used to make HTTP calls following the RESTful protocol. It states clear status messages like 200, 401, 404 etc for all requests and takes care of packing & unpacking of payload responses and its parameters while making HTTP calls. The 'data' field in an Axios response specifies the response payload which is a JSON object that can be easily converted into a JavaScript object in browser and makes the data handling efficient.

Paabhyan at 20:23, 3 December 2019

2019-12-03T20:23:58Z

← Older revision		Revision as of 20:23, 3 December 2019
Line 3:		Line 3:

	== Why Axios with React ==		== Why Axios with React ==
	ReactJS is a frontend library which has a primary function of rendering elements on the DOM effectively. In order to trim the size and keep the focus on core functionality, ReactJS does not ship with an in-built HTTP client like JQuery. Instead it provides us with a framework to create Components, which can be extended and integrated with third party tools to add more functionality. For example, Redux is a commonly used tool along with React for better State Management. Likewise, Axios is one of the most widely and un-opinionated tool used with React for making HTTP requests. More about it can be found on ~~the link~~ [https://github.com/axios/axios]~~(https://github.com/axios/axios)~~		ReactJS is a frontend library which has a primary function of rendering elements on the DOM effectively. In order to trim the size and keep the focus on core functionality, ReactJS does not ship with an in-built HTTP client like JQuery. Instead it provides us with a framework to create Components, which can be extended and integrated with third party tools to add more functionality. For example, Redux is a commonly used tool along with React for better State Management. Likewise, Axios is one of the most widely and un-opinionated tool used with React for making HTTP requests. More about it can be found on this [https://github.com/axios/axios link]

	Axios can be easily integrated into any UI framework and its extensible nature and simplicity make it one of the most popular tools used to make HTTP calls following the RESTful protocol. It states clear status messages like 200, 401, 404 etc for all requests and takes care of packing & unpacking of payload responses and its parameters while making HTTP calls. The 'data' field in an Axios response specifies the response payload which is a JSON object that can be easily converted into a JavaScript object in browser and makes the data handling efficient.		Axios can be easily integrated into any UI framework and its extensible nature and simplicity make it one of the most popular tools used to make HTTP calls following the RESTful protocol. It states clear status messages like 200, 401, 404 etc for all requests and takes care of packing & unpacking of payload responses and its parameters while making HTTP calls. The 'data' field in an Axios response specifies the response payload which is a JSON object that can be easily converted into a JavaScript object in browser and makes the data handling efficient.

Paabhyan at 20:16, 3 December 2019

2019-12-03T20:16:00Z

← Older revision		Revision as of 20:16, 3 December 2019
Line 66:		Line 66:
	}		}
	}		}

	</code>		</code>

Paabhyan at 19:52, 3 December 2019

2019-12-03T19:52:12Z

← Older revision		Revision as of 19:52, 3 December 2019
Line 42:		Line 42:
	</code>		</code>

	~~Axios also supports async/await functions for better handling of promises~~		An example from our React front end making HTTP Post call to authenticate a user.

	<code>		<code>
	~~async function getUser~~() {		export const forgetPasswordUpdate = (email, password, repassword, token) => {
	~~try {~~		// console.log(email, password, repassword, token)
	~~const response~~ = ~~await~~ axios~~.get~~('/~~user?ID=12345~~');		return dispatch => {
	console.log(response);		axios({
	} catch (error) {		method: 'post',
	console.error(~~error~~);		url: 'password_retrieval/forgottenPasswordUpdatePassword',
	}		headers: { "Content-Type": "application/json"},
	}		data:{ "token": token, "reset": { "email": email, "password": password, "repassword": repassword }}
			})
			.then(response => {
			console.log(response)
			// alert('A password reset link has been sent to the address on file for this account.')
			dispatch(actions.passwordResetSuccess())
			})
			.catch(error => {
			console.log(error)
			alert('password reset failed')
			dispatch(actions.passwordResetFailure())
			} )
			}
			}
	</code>		</code>

Paabhyan at 19:49, 3 December 2019

2019-12-03T19:49:23Z

← Older revision		Revision as of 19:49, 3 December 2019
Line 1:		Line 1:
			== How Modern UI frameworks like React fetch data from server ==
			Almost all of the new UI frameworks such as React, Angular or Vue use JavaScript templates with JSX, TypeScript or HTML which compile to Single Page Applications. This means once the base 'index.html' page is loaded into the client's browser, no further web page requests are made again to the server. In order to fetch data dynamically as required in reactive manner, asynchronous HTTP requests (AJAX calls) are made, using the RESTful protocol with Get, Post, Delete and Patch methods. These AJAX calls transact in commonly accepted formats like JSON or XML. Once the new data is fetched and available on the client side, the UI frameworks change the components on the web page to display the new data, keeping the web page same. This reduces load on the servers, improves computing performance with CDN caching and eliminates heavy payload responses containing redundant HTML.

	== Why Axios with React ==		== Why Axios with React ==
	ReactJS is a frontend library which has a primary function of rendering elements on the DOM effectively. In order to trim the size and keep the focus on core functionality, ReactJS does not ship with an in-built HTTP client like JQuery. Instead it provides us with a framework to create Components, which can be extended and integrated with third party tools to add more functionality. For example, Redux is a commonly used tool along with React for better State Management. Likewise, Axios is one of the most widely and un-opinionated tool used with React for making HTTP requests.		ReactJS is a frontend library which has a primary function of rendering elements on the DOM effectively. In order to trim the size and keep the focus on core functionality, ReactJS does not ship with an in-built HTTP client like JQuery. Instead it provides us with a framework to create Components, which can be extended and integrated with third party tools to add more functionality. For example, Redux is a commonly used tool along with React for better State Management. Likewise, Axios is one of the most widely and un-opinionated tool used with React for making HTTP requests. More about it can be found on the link [https://github.com/axios/axios](https://github.com/axios/axios)

			Axios can be easily integrated into any UI framework and its extensible nature and simplicity make it one of the most popular tools used to make HTTP calls following the RESTful protocol. It states clear status messages like 200, 401, 404 etc for all requests and takes care of packing & unpacking of payload responses and its parameters while making HTTP calls. The 'data' field in an Axios response specifies the response payload which is a JSON object that can be easily converted into a JavaScript object in browser and makes the data handling efficient.

			Furthermore, Axios supports the Promise API which is the standard way of handling asynchronous methods or callbacks in JavaScript as defined by the EcmaScript committee. Based on the response received from server, the Promise is either 'resolved' or 'rejected' if the status code is not 200 OK. The 'catch' and 'then' blocks of Promise API make it easier to selectively wait and make next asynchronous HTTP calls without blocking the client UI.

	We will use Axios to make requests to our Expertiza backend which will transact with JSON data, and based on the responses we receive, appropriate Components and routes will be displayed to the user in the browser. The best part about this is, by keeping the backend same, we can also extend it to create a Mobile App for Expertiza based on JSON REST service.		We will use Axios to make requests to our Expertiza backend which will transact with JSON data, and based on the responses we receive, appropriate Components and routes will be displayed to the user in the browser. The best part about this is, by keeping the backend same, we can also extend it to create a Mobile App for Expertiza based on JSON REST service.

Paabhyan at 20:21, 26 November 2019

2019-11-26T20:21:46Z

@@ Line 1: / Line 1: @@
 == Introduction ==
@@ Line 42: / Line 47: @@
+  }
 </code>

Admin: /* Introduction */

2019-11-26T20:13:19Z

Introduction

← Older revision		Revision as of 20:13, 26 November 2019
Line 1:		Line 1:
	== Introduction ==		== Introduction ==

	Axios is a ~~Promised~~ based HTTP client prominently used in conjunction with frontend libraries like React or Vue. Its main function is to make asynchronous HTTP requests to the REST service providers, using the typical request-response pattern usually in JSON format. It supports the Promise API which ensures proper handling of the asynchronous requests.		Axios is a Promise-based HTTP client prominently used in conjunction with frontend libraries like React or Vue. Its main function is to make asynchronous HTTP requests to the REST service providers, using the typical request-response pattern usually in JSON format. It supports the Promise API which ensures proper handling of the asynchronous requests.

	== Installation ==		== Installation ==

Paabhyan: Created page with "== Introduction == Axios is a Promised based HTTP client prominently used in conjunction with frontend libraries like React or Vue. Its main function is to make asynchronous HTT..."

2019-11-26T19:45:48Z

Created page with "== Introduction == Axios is a Promised based HTTP client prominently used in conjunction with frontend libraries like React or Vue. Its main function is to make asynchronous HTT..."

New page

== Introduction ==

Axios is a Promised based HTTP client prominently used in conjunction with frontend libraries like React or Vue. Its main function is to make asynchronous HTTP requests to the REST service providers, using the typical request-response pattern usually in JSON format. It supports the Promise API which ensures proper handling of the asynchronous requests.

== Installation ==
Axios can be simply installed locally (in the node_modules of your project) as a NPM package using the command
<code>npm install axios</code>
or it can also be installed globally (in the system node_modules cache) using the command
<code>npm install -g axios</code>

== Usage ==

Performing a GET AJAX request

<code>
axios.get('/user', {
params: {
ID: 12345
}
})
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
})
.finally(function () {
// always executed
});
</code>

Axios also supports async/await functions for better handling of promises

<code>
async function getUser() {
try {
const response = await axios.get('/user?ID=12345');
console.log(response);
} catch (error) {
console.error(error);
}
}
</code>

== Why Axios with React ==
ReactJS is a frontend library which has a primary function of rendering elements on the DOM effectively. In order to trim the size and keep the focus on core functionality, ReactJS does not ship with an in-built HTTP client like JQuery. Instead it provides us with a framework to create Components, which can be extended and integrated with third party tools to add more functionality. For example, Redux is a commonly used tool along with React for better State Management. Likewise, Axios is one of the most widely and un-opinionated tool used with React for making HTTP requests.

We will use Axios to make requests to our Expertiza backend which will transact with JSON data, and based on the responses we receive, appropriate Components and routes will be displayed to the user in the browser. The best part about this is, by keeping the backend same, we can also extend it to create a Mobile App for Expertiza based on JSON REST service.