es7-async - GitLite

KO | EN

gitlite — search

#react #ai #typescript #golang #android #linux #docker #macos #awesome #kubernetes #vue #pytorch #security #mcp

es7-async

(★ 153)

Playing around with ES7 async functions

파일 탐색기

최종 버전 다운로드 (.zip)

- data.json
- index.html
- products.json
- users.json
- ajax.js
- core.js
- fetch.js
- main.js
.gitignore
Gruntfile.js
package.json
README.md

# 설치 가이드

1. 코드 내려받기

git clone https://github.com/jaydson/es7-async

깃허브에서 프로젝트 코드 전체를 내 컴퓨터로 내려받습니다.

cd es7-async

방금 내려받은 프로젝트 폴더 안으로 이동합니다.

2. Node.js

쉬움 추천

사전 준비물

Git GitHub에서 프로젝트 코드를 내려받으려면 필요합니다.
Node.js npm 명령어를 쓰려면 Node.js가 설치되어 있어야 합니다. LTS(장기지원) 버전을 추천합니다.

npm install

package.json에 명시된 라이브러리들을 내려받아 설치합니다.

✅ 명령어 실행 후 터미널에 나타나는 주소(보통 http://localhost:3000 형태)를 브라우저에서 열어보세요.

이 레포의 README에 적힌 실제 명령어를 그대로 가져왔습니다.

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# es7-async
Playing around with [ES7 async functions](https://github.com/lukehoban/ecmascript-asyncawait)

## Case study
In this case study our program must load 3 resources (json files).
The requests must to be chained, one after another, logging the output for each request success.

### Old friend Ajax
First, let's look how we can accomplish the mission with our old friend Ajax.
The `ajax` function is responsible for creating an `xhr` object and execute the callback returning the data.
No big deal here, we have done this a lot in the past, right?

```javascript
// Getting data
ajax('data.json', (data) => {
	console.log('AJAX/data >>>', JSON.parse(data));

// Getting users
	ajax('users.json', (users) => {
		console.log('AJAX/users >>>', JSON.parse(users));

// Getting products
		ajax('products.json', (products) => {
			console.log('AJAX/products >>>', JSON.parse(products));
		});
	});
});
```

### Not so new friend, Promises
[Promises](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Promise) are around for a while, and now it is part of the ECMAScript 6º edition.
With `promises` we eliminate the pyramid of doom (callback hell), having a much more cleaner code.
Check it out:
```javascript
// Promises
// Wrap the ajax function to return promises
function requestP(url) {
	return new Promise(function(resolve, reject) {
		ajax(url, (response) => {
			resolve(JSON.parse(response));
		});
	});
}

// Getting data
requestP('data.json')
.then(function(data){
	console.log('Promises/data >>>', data);
});

// Getting users
requestP('users.json')
.then(function(users){
	console.log('Promises/users >>>', users);
});

// Getting products
requestP('products.json')
.then(function(products){
	console.log('Promises/products >>>', products);
});
```
With promises, we can easily have parallel execution:
```javascript
// Parallel operations with promises
// Getting data, users and products
Promise.all([
	requestP('data.json'),
	requestP('users.json'),
	requestP('products.json')
])
.then(function(data) {
	console.log('Parallel promises >>>', data);
});
```
The [fetch API](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API) is the new Ajax substitute. We have a lot of new features and a very nice promise-based API:
```javascript
// Promises with the fetch API
// Getting data
fetch('data.json')
.then(function(data) {
	return data.json();
})
.then(function(data) {
	console.log('Promises+fetch/data >>>', data);
});

// Getting users
fetch('users.json')
.then(function(data) {
	return data.json();
})
.then(function(users) {
	console.log('Promises+fetch/users >>>', users);
});

// Getting products
fetch('products.json')
.then(function(data){
	return data.json();
})
.then(function(products) {
	console.log('Promises+fetch/products >>>', products);
});
```

### New powerful friend, generators
[Generators](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/function*) basically are functions that can have their execution paused.
Take a look on what we can do with generators:
```javascript
// Generators
function request(url) {
	ajax(url, (response) => {
		iterator.next(JSON.parse(response));
	});
}

function *main() {
	// Getting data
	let data = yield request('data.json');

// Getting users
	let users = yield request('users.json');

// Getting products
	let products = yield request('products.json');

console.log('Generator/data >>>', data);
	console.log('Generator/users >>>', users);
	console.log('Generator/products >>>', products);
}

var iterator = main();
iterator.next();
```

### The new awesome beast, async functions
With [async functions](https://github.com/lukehoban/ecmascript-asyncawait), we can `await` on Promises.
Take a look (awesomeness alert):
```javascript
(async () => {
	// Getting data
	let data = await requestP('data.json');

// Getting users
	let users = await requestP('users.json');

// Getting products
	let products = await requestP('products.json');

console.log('ES7 Async/data >>>', data);
	console.log('ES7 Async/users >>>', users);
	console.log('ES7 Async/products >>>', products);
})();
```
With the fetch API:
```javascript
(async () => {
// Async/await using the fetch API
	try {

// Getting data
		let data = await fetch('data.json');

// Parsing data
		let parsedData = await data.json();

// Getting users
		let users = await fetch('users.json');

// Parsing users
		let parsedUsers = await users.json();

// Getting products
		let products = await fetch('products.json');

// Parsing products
		let parsedProducts = await products.json();

console.log('ES7 Async+fetch/data >>>', parsedData);
		console.log('ES7 Async+fetch/users >>>', parsedUsers);
		console.log('ES7 Async+fetch/products >>>', parsedProducts);

} catch (error) {
		console.log(error);
	}
})();
```
Parallel operations with async:
```javascript
(async () => {
	let parallelData = await Promise.all([
		requestP('data.json'),
		requestP('users.json'),
		requestP('products.json')
	]);
	console.log('Async parallel >>>', parallelData);
})();
```

Parallel operations with async + fetch (Oh my god this is great!):
```javascript
(async () => {
	let parallelDataFetch = await Promise.all([
		(await fetch('data.json')).json(),
		(await fetch('users.json')).json(),
		(await fetch('products.json')).json()
	]);
	console.log('Async parallel+fetch >>>', parallelDataFetch);
})();
```

## How to run this experiment
```bash
npm install
grunt
```
Serve the dist folder, open the `/sample/index.html` and check it out you dev-tools console.

## References
http://jakearchibald.com/2014/es7-async-functions/
http://pouchdb.com/2015/03/05/taming-the-async-beast-with-es7.html
http://www.sitepoint.com/simplifying-asynchronous-coding-es7-async-functions/