After watching numerous videos on Javascript, I am still struggling to grasp the concepts of callbacks, promises, and async await. Below is a snippet of code that I have put together based on my current understanding.
Here is my index.html:
<!DOCTYPE html>
<html lang="en" ng-app='myApp'>
<head>
<meta charset="UTF-8>
<title>Index</title>
<script src='https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.5/angular.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js'></script>
<script src='script.js'></script>
</head>
<body ng-controller='myController'>
</body>
</html>
script.js:
angular
.module('myApp', [])
.controller('myController', function($scope, $http) {
// Here, I am using what I believe are callbacks
function callback(response) {
console.log("Animal name:", response.data);
}
function callbackerr(response) {
console.log("err:", response);
}
$http({
method: 'GET',
url: 'animalname.json'
}).then(callback)
.catch(callbackerr);
// Now, I am working with what I think are promises
$http({
method: 'GET',
url: 'animalage.json'
}).then(function(response) {
console.log("Animal age: ", response.data);
}).catch(function(error) {
console.log(error);
})
// I am interested in learning how to convert this code to use async await
// Could you provide guidance on how to do so?
});
If my understanding of callbacks and promises is incorrect, please correct me and provide some insights!
I appreciate any help!