imranhsayed / javascript-concepts

:mortar_board: A demo app for JavaScript Concepts

JavaScript Concepts 🎓

Description 📋

A demo app for JavaScript Concept

Installation 🔧

1. Clone this repo by running git clone https://github.com/imranhsayed/javascript-concepts
2. cd javascript-concepts
3. cd branch-name
4. npm install
5. npm run server

Branch Information 🔗

1. callbacks

• Callbacks add complexity and readability issue. And its messy to chain the tasks

2. promises

• A promise is an object that represent the eventual( future ) completion(or failure) of an asynchronous operation, and its future result value. Promises are thin abstraction around call backs. ( e.g. readFile.( 'config.json' ).then(...).catch(...) ) In below example what you pass in resolve will be available as value in .then(( value )=> ...)

var promise1 = new Promise(function(resolve, reject) {
  setTimeout(function() {
    resolve('foo');
  }, 300);
});

promise1.then(function(value) {
  console.log(value);
  // expected output: "foo"
});

3. async-await

Async - declares an asynchronous function (async function someName(){...}).

• Automatically transforms a regular function into a Promise.
• When called async functions resolve with whatever is returned in their body.
• Async functions enable the use of await.

Await - pauses the execution of async functions. (const result = await someAsyncCall();).

• When placed in front of a Promise call, await forces the rest of the code to wait until that Promise finishes and returns a result.
• Await works only with Promises, it does not work with callbacks.
• Await can only be used inside async functions.

Async Await Example

	async function getTodoData() {
		const todoData = await fetch( 'https://jsonplaceholder.typicode.com/todos/' );
		return todoData;
	}

	getTodoData()
		.then( res => res.json() )
		.then( ( result ) => {
		console.warn( result );
	} );

Try and Catch Method

	async function getPosts() {
		try {
			const postsData = await await fetch( 'https://jsonplaceholder.typicode.com/posts/' );
			return postsData;
		}
		catch ( error ) {
			console.warn( 'error', error );
		}
	}

	getPosts()
		.then( res => res.json() )
		.then( ( result ) => {
			console.warn( result );
		} );

Fetch Example

	fetch('https://example.com/wp-json/wp/v2/posts')
		.then(
			function(response) {
				if (response.status !== 200) {
					console.log('Looks like there was a problem. Status Code: ' +
						response.status);
					return;
				}

				// Examine the text in the response
				response.json().then(function(data) {
					console.log(data);
				});
			}
		)
		.catch(function(err) {
			console.log('Fetch Error :-S', err);
		});

Useful Links 🔗

1. async-await concept blog
2. try-catch
3. Promise.all()

Instructions 👉

Common Commands 💻

1. npm run dev starts a webpack dev server at http://localhost:8080
2. npm run prod runs build for production in dist directory.

Built With ⚡

1. Node
2. Express
3. ES6
4. Webpack
5. Babel

Author 👤

• Imran Sayed

License

• MIT license