Skip to content

Commit 52250fa

Browse files
dinanathsj29dinanathsj29
authored
chapter 4.2 and 5 uploaded
chapter 4.2 and 5 uploaded
1 parent aff6e9f commit 52250fa

File tree

1 file changed

+233
-17
lines changed

1 file changed

+233
-17
lines changed

‎README.md

+233-17
Original file line numberDiff line numberDiff line change
@@ -91,10 +91,13 @@ Topics included/covered
9191
- 3.2. [XMLHttpRequest-Get Post Data-Advanced](#32-xmlhttprequest-get-post-data-advanced)
9292

9393
4. [JavaScript Http Request with fetch() API and Promises](#4-javascript-http-request-with-fetch()-api-and-promises)
94-
- 4.1. [Introduction to fetch() api](#41-introduction-to-fetch()-api)
95-
- 4.2. [fetch() api demo example](#42-fetch()-api-demo-example)
94+
- 4.1. [Introduction to fetch() API](#41-introduction-to-fetch()-api)
95+
- 4.2. [fetch() API demo example](#42-fetch()-api-demo-example)
9696

97-
5. [JavaScript Http Request with Axiox library](#5-javascript-http-request-with-axiox-library)
97+
5. [JavaScript Http Request with Axios library](#5-javascript-http-request-with-axios-library)
98+
99+
- 5.1. [Introduction to fetch() API](#51-introduction-to-axios)
100+
- 5.2. [Axios demo example](#52-axios-demo-example)
98101

99102
6. [AJAX Reference and Resources](#6-ajax-reference-and-resources)
100103

@@ -332,7 +335,7 @@ Many famous and widely used web applications use AJAX technology (to Save, Scrol
332335
```js
333336
XMLHttpRequest.open ('http method type', 'url-path');
334337

335-
XMLHttpRequest.open ('GET/POST', '.json file path or web api path');
338+
XMLHttpRequest.open ('GET/POST', '.json file path or web API path');
336339
```
337340

338341

@@ -471,7 +474,7 @@ JSON Web API path: https://learnwebcode.github.io/json-example/animals-1.json
471474
<meta charset="UTF-8">
472475
<meta name="viewport" content="width=device-width, initial-scale=1.0">
473476
<meta http-equiv="X-UA-Compatible" content="ie=edge">
474-
<title>loading web api data</title>
477+
<title>loading web API data</title>
475478

476479
<script type="text/javascript" src="2.4-loading-json-web-api-data.js"></script>
477480

@@ -867,7 +870,7 @@ postButton.addEventListener('click', fn_postData);
867870
4 JavaScript Http Request with fetch() API and Promises
868871
=====================
869872

870-
4.1. Introduction to fetch() api
873+
4.1. Introduction to fetch() API
871874
---------------------
872875
- Fetch is a new, modern, promise-based API that lets us do Ajax requests without all the unnecessary complications associated with XMLHttpRequest
873876
- `fetch() API` is a modern replacement for XMLHttpRequest, addition to the browser, better than xmlHttpRequest
@@ -877,7 +880,7 @@ postButton.addEventListener('click', fn_postData);
877880
- Browser support: Support for Fetch is pretty good! All major browsers (exception of Opera Mini and old IE) support it natively, which means we can safely use it in our projects (older browser does not support!)
878881

879882

880-
4.2. fetch() api demo example
883+
4.2. fetch() API demo example
881884
---------------------
882885

883886
> **Syntax & Example**: `4.2-fetch-api.html`
@@ -933,16 +936,16 @@ const fn_getData = () => {
933936

934937
fetch('https://reqres.in/api/users').then(respenseResult => {
935938
console.log('respenseResult:', respenseResult);
939+
// to convert response body: ReadableStream to json
936940
return respenseResult.json();
937941
})
938-
.then(respenseResultData => {
939-
console.log('respenseResultData:', respenseResultData);
940-
941-
document.getElementsByClassName('user-name')[0].innerHTML = respenseResultData.data[0].first_name + ' ' + respenseResultData.data[0].last_name;
942-
document.getElementsByClassName('user-email')[0].innerHTML = respenseResultData.data[0].email;
943-
document.getElementsByClassName('user-image')[0].src = respenseResultData.data[0].avatar;
944-
});
942+
.then(respenseResultData => {
943+
console.log('respenseResultData:', respenseResultData);
945944

945+
document.getElementsByClassName('user-name')[0].innerHTML = respenseResultData.data[0].first_name + ' ' + respenseResultData.data[0].last_name;
946+
document.getElementsByClassName('user-email')[0].innerHTML = respenseResultData.data[0].email;
947+
document.getElementsByClassName('user-image')[0].src = respenseResultData.data[0].avatar;
948+
});
946949
}
947950

948951
// define function to post/send data
@@ -976,14 +979,227 @@ getButton.addEventListener('click', fn_getData);
976979
postButton.addEventListener('click', fn_postData);
977980
```
978981

982+
<hr/>
983+
984+
> **Syntax & Example**: `4.2-fetch-api-advanced.html`
985+
986+
```html
987+
<!DOCTYPE html>
988+
<html lang="en">
989+
990+
<head>
991+
<meta charset="UTF-8">
992+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
993+
<meta http-equiv="X-UA-Compatible" content="ie=edge">
994+
<title>4.2-fetch-api-advanced</title>
995+
996+
<link type="text/css" rel="stylesheet" href="styles.css">
997+
<!-- Without async or defer , browser will run your script immediately, before rendering the elements that's below your script tag. -->
998+
<script type="text/javascript" src="4.2-fetch-api-advanced.js" defer></script>
999+
1000+
</head>
1001+
1002+
<body>
1003+
1004+
<h1><center>4.2-fetch-api-advanced</center></h1>
1005+
<section class="button-container">
1006+
<button id="getButton" class="button">GET DATA</button>
1007+
<button id="postButton" class="button">POST LOGIN DATA</button>
1008+
</section>
1009+
1010+
<section class="user-container">
1011+
<h1 class="user-name"></h1>
1012+
<span class="user-email"></span> <br/> <br/>
1013+
<img class="user-image" src=" " />
1014+
</section>
1015+
1016+
</body>
1017+
1018+
</html>
1019+
```
1020+
1021+
<hr/>
1022+
1023+
> **Syntax & Example**: `4.2-fetch-api-advanced.js`
1024+
1025+
```javascript
1026+
console.log('4.2-fetch-api-advanced.js loaded');
1027+
1028+
// get buttons from html/DOM
1029+
const getButton = document.getElementById('getButton');
1030+
const postButton = document.getElementById('postButton');
1031+
1032+
// common function to send receive http call
1033+
const fn_sendhttpRequest = (httpMethod, httpUrl, data) => {
1034+
1035+
return fetch(httpUrl, {
1036+
method: httpMethod,
1037+
body: JSON.stringify(data),
1038+
headers: data ? {'Content-type': 'application/json'} : {}
1039+
}).then(respenseResult => {
1040+
console.log('respenseResult:', respenseResult);
1041+
if (respenseResult.status >= 400) {
1042+
return respenseResult.json().then(errResponseData => {
1043+
const error = new Error('Please verify...something went wrong!');
1044+
error.data = errResponseData;
1045+
throw error;
1046+
})
1047+
}
1048+
// to convert response body: ReadableStream to json
1049+
return respenseResult.json();
1050+
})
1051+
1052+
}
1053+
1054+
// define function to get data
1055+
const fn_getData = () => {
1056+
console.log('getButton clicked - in fn_getData');
1057+
1058+
fn_sendhttpRequest('GET', 'https://reqres.in/api/users')
1059+
.then(respenseResultData => {
1060+
console.log('respenseResultData:', respenseResultData);
1061+
1062+
document.getElementsByClassName('user-name')[0].innerHTML = respenseResultData.data[0].first_name + ' ' + respenseResultData.data[0].last_name;
1063+
document.getElementsByClassName('user-email')[0].innerHTML = respenseResultData.data[0].email;
1064+
document.getElementsByClassName('user-image')[0].src = respenseResultData.data[0].avatar;
1065+
});
1066+
1067+
}
1068+
1069+
// define function to post/send data
1070+
const fn_postData = () => {
1071+
console.log('postButton clicked - in fn_postData');
1072+
1073+
const postLoginData = {
1074+
email: "eve.holt@reqres.in",
1075+
password: "pistol"
1076+
};
1077+
1078+
fn_sendhttpRequest('POST', 'https://reqres.in/api/register', postLoginData)
1079+
.then(respenseResultData => {
1080+
console.log('respenseResultData:', respenseResultData);
1081+
})
1082+
.catch(err => {
1083+
console.error('Request failed', err)
1084+
})
1085+
1086+
}
1087+
1088+
// add event listener to button
1089+
getButton.addEventListener('click', fn_getData);
1090+
postButton.addEventListener('click', fn_postData);
1091+
```
9791092

980-
5 JavaScript Http Request with Axiox library
1093+
5 JavaScript Http Request with Axios library
9811094
=====================
9821095

1096+
5.1. Introduction to Axios
1097+
---------------------
1098+
1099+
- Axios is an open-source library that allows us to easily make HTTP requests
1100+
- Axios is a third-party JavaScript library which wraps xmlHttpRequest, based on Promise API and makes working with AJAX much easier
1101+
- Axios is a Promise-based HTTP client for JavaScript which can be used in your front-end application, also in Node.js backend
1102+
- Browser support: It supports all modern browsers, including support for IE8 and higher! All major browsers support it, as xmlHttpRequest is the base of Axios
1103+
1104+
1105+
5.2. Axios demo example
1106+
---------------------
1107+
1108+
> **Syntax & Example**: `5.2-axios.html`
1109+
1110+
```html
1111+
<!DOCTYPE html>
1112+
<html lang="en">
1113+
1114+
<head>
1115+
<meta charset="UTF-8">
1116+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
1117+
<meta http-equiv="X-UA-Compatible" content="ie=edge">
1118+
<title>5.2-axios</title>
1119+
1120+
<link type="text/css" rel="stylesheet" href="styles.css">
1121+
<script type="text/javascript" src="axios.min.js" defer></script>
1122+
<!-- Without async or defer , browser will run your script immediately, before rendering the elements that's below your script tag. -->
1123+
<script type="text/javascript" src="5.2-axios.js" defer></script>
1124+
1125+
</head>
1126+
1127+
<body>
1128+
1129+
<h1><center>5.2-axios</center></h1>
1130+
<section class="button-container">
1131+
<button id="getButton" class="button">GET DATA</button>
1132+
<button id="postButton" class="button">POST LOGIN DATA</button>
1133+
</section>
1134+
1135+
<section class="user-container">
1136+
<h1 class="user-name"></h1>
1137+
<span class="user-email"></span> <br/> <br/>
1138+
<img class="user-image" src=" " />
1139+
</section>
1140+
1141+
</body>
1142+
1143+
</html>
1144+
```
1145+
1146+
<hr/>
1147+
1148+
> **Syntax & Example**: `5.2-axios.js`
1149+
1150+
```javascript
1151+
console.log('5.2-axios.js loaded');
1152+
1153+
// get buttons from html/DOM
1154+
const getButton = document.getElementById('getButton');
1155+
const postButton = document.getElementById('postButton');
1156+
1157+
// define function to get data
1158+
const fn_getData = () => {
1159+
console.log('getButton clicked - in fn_getData');
1160+
1161+
axios.get('https://reqres.in/api/users').then(respenseResultData => {
1162+
console.log('respenseResultData:', respenseResultData);
1163+
1164+
document.getElementsByClassName('user-name')[0].innerHTML = respenseResultData.data.data[0].first_name + ' ' + respenseResultData.data.data[0].last_name;
1165+
document.getElementsByClassName('user-email')[0].innerHTML = respenseResultData.data.data[0].email;
1166+
document.getElementsByClassName('user-image')[0].src = respenseResultData.data.data[0].avatar;
1167+
})
1168+
1169+
}
1170+
1171+
// define function to post/send data
1172+
const fn_postData = () => {
1173+
console.log('postButton clicked - in fn_postData');
1174+
1175+
const postLoginData = {
1176+
email: "eve.holt@reqres.in",
1177+
password: "pistol"
1178+
};
1179+
1180+
axios.post('https://reqres.in/api/register', postLoginData, {
1181+
headers: {
1182+
'Content-type': 'application/json'
1183+
}
1184+
}).then(respenseResultData => {
1185+
console.log('respenseResultData:', respenseResultData);
1186+
console.log('respenseResultData.data:', respenseResultData.data);
1187+
}).catch(err => {
1188+
console.error('Request failed...Something went wrong :', err);
1189+
console.error(err, err.response.data);
1190+
})
1191+
1192+
}
1193+
1194+
// add event listener to button
1195+
getButton.addEventListener('click', fn_getData);
1196+
postButton.addEventListener('click', fn_postData);
1197+
```
1198+
9831199

9841200
6 AJAX Reference and Resources
9851201
=====================
9861202

987-
> axios - https://github.com/axios/axios
988-
9891203
> https://reqres.in/
1204+
1205+
> axios - https://github.com/axios/axios

0 commit comments

Comments
 (0)