Asynchronous Processing in JavaScript

---
title: 'Asynchronous Processing in JavaScript'
author: 'Hun Im'
date: 2022-05-05T19:53:35+09:00
category: ['POSTS']
tags: ['Javascript']
og_image: "/images/gamer.png" 
keywords: ['Javascript']
---

**Promise**

The Promise object, introduced in JavaScript ES6, was first created to solve the "callback hell" problem, which arises when callback functions accumulate during asynchronous operations.

While it works on the same principle, the Promise object provides better readability, which is why it is utilized. However, using many promise variables can lead to experiencing "promise hell" as well.

**Response Time of Callback Functions, Promises, and Async/Await**

The response time for both callback functions and promises is almost identical. They are read sequentially in the initial hoisting environment, causing the asynchronous part to be read before the previous processes are complete. 

Thus, even if there is a delay with functions like setTimeout, the response time disregards the delay and processes the next lines first.

The reason the response time for callback functions and promises is almost the same is due to slight speed differences caused by the browser's environment.

Overall, the response time for async/await is the slowest because it waits for all asynchronous tasks (like setTimeout) to finish before proceeding in order.

**Callback Functions**

To understand callback functions, one must first understand "hoisting."

**Hoisting**

Hoisting is the process of elevating all declarations within a function to the top of the function's scope.

*All necessary values for the function are declared at the top before the function executes.*

**setTimeout(callback , time)**

A browser API that outputs the callback function after a specified time (in milliseconds).

**Synchronous vs. Asynchronous**

JavaScript is synchronous.

Synchronous callback

```jsx
console.log('1')
setTimeout(() => console.log('2'), 1000)
console.log('3')

function printImmediately(print) {
  print()
}
printImmediately(() => console.log('hello'))
```

Hoisting result:

```jsx
function printImmediately(print) {
  // 1. Hoisting function declaration
  print()
}
console.log('1') // 2. Outputs '1'
setTimeout(() => console.log('2'), 1000) // 3. Requests to output '2' after 1 second
console.log('3') // 4. Outputs '3'
printImmediately(() => console.log('hello')) // 5. Immediately executes function, outputs 'hello'
// 6. Outputs '2' after 1 second, per browser API
```

Asynchronous callback

```jsx
console.log('1')
setTimeout(() => console.log('2'), 1000)
console.log('3')

function printImmediately(print) {
  print()
}
printImmediately(() => console.log('hello'))
function printWithDelay(print, timeout) {
  setTimeout(print, timeout)
}

printWithDelay(() => console.log('async callback'), 2000)
```

Hoisting result:

```jsx
function printImmediately(print) {
  print()
}
function printWithDelay(print, timeout) {
  setTimeout(print, timeout)
}

console.log('1') // Synchronous
setTimeout(() => console.log('2'), 1000) // Asynchronous ------------>
console.log('3') // Synchronous
printImmediately(() => console.log('hello')) // Synchronous
printWithDelay(() => console.log('async callback'), 2000) // Asynchronous ------------>
```

**Promise**

A Promise is "an object that can handle asynchronous states as values."

**Why are promises needed?**

Promises are mainly used to display data received from servers. Generally, when implementing web applications, APIs are used to request and retrieve data from servers.

**Problems with Callback Patterns**

1. Nested use of callback functions

```jsx
function requestData1(callback) {
  callback(data) // 2
}
function requestData2(callback) {
  callback(data) // 4
}
function onSuccess1(data) {
  console.log(data)
  requestData2(onSuccess2) // 3
}
function onSuccess2(data) {
  // 5
  console.log(data)
}
requestData1(onSuccess1) // 1
// The flow of callback pattern code is not sequential, making it hard to read.
```

2. Simple Promise code example

```jsx
requestData1()
  .then((data) => {
    console.log(data)
    return requestData2()
  })
  .then((data) => {
    console.log(data)
  })
```

3. Three states of a Promise

- pending: waiting
- fulfilled: completed normally with a result
- rejected: completed abnormally.
- settled: either fulfilled or rejected state. Once a promise is settled, it cannot change to another state. It can only change from pending to fulfilled or rejected.

4. How to create a Promise

```js
const p1 = new Promise((resolve, reject) => {
  resolve(data)
  // or reject('error message')
})
const p2 = Promise.reject('error message')
const p3 = Promise.resolve(param)
```

5. Promise.resolve return value

```js
const p1 = Promise.resolve(123)
console.log(p1 !== 123) // true 이행됨 상태인 프로미스가 반환된다.
const p2 = new Promise((resolve) => setTimeout(() => resolve(10), 1))
console.log(Promise.resolve(p2) === p2) // true
// Promise.resolve 함수에 프로미스가 입력되면 그 자신이 반환된다.
```

6. Using Promises: .then The then method is used when handling a fulfilled promise.

```js
//requestData().then(onResolve, onReject);
// When the promise becomes fulfilled, the onResolve function is called; if rejected, the onReject function is called.
Promise.resolve(123).then((data) => console.log(data)) // 123
Promise.reject('err').then(null, (error) => console.log(error)) // err
```

7. Chaining multiple .then calls

```js
let requestData1 = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve('hun')
  }, 1000)
})
let requestData2 = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve('jenny')
  }, 2000)
})

requestData1
  .then((data) => {
    console.log(data)
    return requestData2 // 1
  })
  .then((data) => {
    return data + 1 // 2
  })
  .then((data) => {
    throw new Error('some Error') // 3
  })
  .then(null, (error) => {
    console.log(error)
  })
```

1. When a promise is returned from a function, the then method returns that value as is.
2. If a non-promise value is returned, the then method returns a fulfilled promise.
3. If an exception occurs within the function, the then method returns a rejected promise.
4. If it becomes a rejected state, the onReject function is called.

```js
Promise.reject('err')
  .then(() => console.log('then 1')) // 1
  .then(() => console.log('then 2')) // 1
  .then(
    () => console.log('then 3'),
    () => console.log('then 4')
  ) // 2
  .then(
    () => console.log('then 5'),
    () => console.log('then 6')
  ) // 3
```

Since the promise is rejected, the first encountered onReject function is called, making the first instance omitted, and the then 4 from the second code outputs. The function that prints then 4 has undefined as its result, which creates a fulfilled promise. Therefore, then 5 is printed in the subsequent then method. The most important characteristic of the then method is that it is always called in the order it is chained.

8. Using Promises 2: catch Catch is a method for handling exceptions that occur during promise execution. The catch method serves the same purpose as the onReject function of the then method.
javascript
코드 복사
Promise.reject(1).then(null, (error) => {
  console.log(error)
})
Promise.reject(1).catch((error) => {
  console.log(error)
})
For readability, it’s better to use the catch method for exception handling than the onReject function of then.

Problems when using the onReject function of then.
javascript
코드 복사
Promise.resolve().then(
  () => {
    // 1
    throw new Error('some error')
  },
  (error) => {
    // 2
    console.log(error)
  }
)
The exception raised in the resolve function of the first then is not handled by the reject function of the same then. Executing this will result in an Unhandled promise rejection error because the rejected promise was not handled.

An example using catch instead of the onReject function.

```js
Promise.reject(1).then(null, (error) => {
  console.log(error)
})
Promise.reject(1).catch((error) => {
  console.log(error)
})
```

For readability, it’s better to use the catch method for exception handling than the onReject function of then.

9. Problems when using the onReject function of then.

```js
Promise.resolve().then(
  () => {
    // 1
    throw new Error('some error')
  },
  (error) => {
    // 2
    console.log(error)
  }
)
```

The exception raised in the resolve function of the first then is not handled by the reject function of the same then. Executing this will result in an Unhandled promise rejection error because the rejected promise was not handled.

10. An example using catch instead of the onReject function.

```js
Promise.resolve()
  .then(() => {
    throw new Error('some error')
  })
  .catch((error) => {
    console.log(error)
  })
```

11. Using then after catch

```js
Promise.reject(10)
  .then((data) => {
    console.log('then1:', data)
    return 20
  })
  .catch((error) => {
    console.log('catch:', error)
    return 30
  })
  .then((data) => {
    console.log('then2:', data)
  })
// catch: 10
// then2: 30
```

12. Using Promises 3: Finally

- A simple code example using finally:

```js
requestData()
.then(data => {
	...
})
.catch(error => {
	...
})
.finally(() => {
	...
});

```

- The finally method does not create a new promise.

```js
function requestData(){
  return fetch()
    .catch(error => {
		...
	})
    .finally(() => {
	senLogToServer('requestData finished')
	})
  }
 requestData().then(data => console.log(data)); // 1번

```

In the first case, the return value of the `requestData` function is the promise before the `finally` method is called. Therefore, as a user of the requestData function, you don't have to worry about the existence of the `finally` method.

**Using Promises Effectively**

**Handling in Parallel: Promise.all**

`Promise.all` is a function used for processing multiple promises in parallel. By chaining the `then` method, you can overcome the drawback of asynchronous processes being executed sequentially.

- Asynchronous code executed sequentially:

```js
requestData1()
  .then((data) => {
    console.log(data)
    return requestData2()
  })
  .then((data) => {
    console.log(data)
  })
```

If there is no dependency between asynchronous functions, processing them in parallel is faster. By calling the asynchronous functions separately without chaining the then method, they will be processed in parallel.

- Code executed in parallel:

```js
requestData1().then((data) => {
  console.log(data)
})
requestData2().then((data) => {
  console.log(data)
})
```

`requestData1` and `requestData2` run simultaneously. If you want to process multiple promises in parallel, use Promise.al

- Code using `Promise.all`:

```js
Promise.all([requestData1(), requestData2()]).then(([data1, data2]) => {
  console.log(data1, data2)
})
```

The `Promise.all` function returns a promise. The promise returned by `Promise.all` will only become fulfilled when all the input promises are fulfilled. If any promise is rejected, the promise returned by `Promise.all` will also be in the rejected state.

**Getting the Fastest Processed Promise: Promise.race**

When any promise input to the `Promise.race` function becomes fulfilled, the promise returned by Promise.race also becomes fulfilled.

- Simple code using `Promise.race`:

```js
Promise.race([
  requestData(),
  new Promise((_, reject) => setTimeout(reject, 3000)),
])
  .then((data) => console.log(data))
  .catch((error) => console.log(error))
```

If the `requestData` function receives data within 3 seconds, the `then` method is called; otherwise, the `catch` method is called.

**Data Caching Using Promises**

By leveraging the property of promises that maintain their state when fulfilled, you can cache data.

- Implementing caching functionality with promises:

```js
let cachedPromise
function getData() {
  cachedPromise = cachedPromise || requestData() // 1번
  return cachedPromise
}
getData().then((v) => console.log(v))
getData().then((v) => console.log(v))
```

n the first instance, when the `getData` function is called for the first time, `requestData` is invoked. Once the data retrieval task is complete, the result is stored in the `cachedPromise`.

**Cautions When Using Promises**

- Don't forget the return keyword. It's easy to forget to input the return keyword in the internal function of the `then` method. The data of the promise object returned by the `then` method is the value returned by the internal function. If you don't use the return keyword, the data of the promise object will be undefined.

- Code that forgets the return keyword:

```js
Promise.resolve(10)
  .then((data) => {
    console.log(data)
    Promise.resolve(20) // 2번
  })
  .then((data) => {
    console.log(data) // 1번
  })
```

In the first instance, undefined is printed contrary to the intention. If you input the return keyword in the second piece of code, 20 will be printed as intended.

- Remember that promises are immutable objects. Promises are immutable objects.

- Code written thinking that a promise can be modified:

```js
function requestData() {
  const p = Promise.resolve(10)
  p.then(() => {
    //  1
    return 20
  })
  return p
}
requestData().then((v) => {
  console.log(v) // 10 // 2
})
```

The `then` method does not modify the existing object; it returns a new promise. In the second case, if you want 20 to be printed, you need to modify the `requestData` function as follows.

- Code returning the promise created by the `then` method:

```js
function requestData() {
  return Promise.resolve(10).then((v) => {
    return 20
  })
}
```

- Avoid using nested promises. Using nested promises can lead to "promise hell" similar to callback hell.

  ```js
  requestData1().then(result1 => {
    requestData2(result2 => {
  		....
   });
  });

  ```

This is not readable, so let's refactor it as in the following code.

- Refactored code to avoid nesting:

```js
requestData1()
  .then(result1 => {
	return requestData2(result1)
})
  .then(result2 => {
	return ... // 1번
})
```

If you need to reference the result1 variable in the first instance, how can you do that?

- You can solve the variable reference issue without nesting by using `Promise.all`.

- Code solving variable reference problem using `Promise.all`:

```js
requestData1()
 .then(result1 => {
  return Promise.all([result1, requestData2(result1)]) // 1
  .then(([result1, result2]) => {
    ...........
});
```

In the first instance, if you input non-promise values into the array for the `Promise.all` function, those values will be treated as if they are fulfilled promises.

**Pay Attention to Exception Handling in Synchronous Code**

When using promises like synchronous (sync) code, you should pay attention to exception handling.

- Code where exceptions occurring in synchronous code are not handled:

```js
function requestData() {
  doSync() // 1
  return fetch()
    .then((data) => console.log(data))
    .catch((error) => console.log(error))
}
```

In the first instance, if the `doSync` function does not necessarily need to be called before fetch, it's better to put it inside the `then` method like this:

- Code where synchronous code also handles exceptions:

```js
function requestData() {
  return fetch()
    .then((data) => {
      doSync()
      console.log(data)
    })
    .catch((error) => console.log(Error))
}
```

Exceptions occurring in `doSync` will be handled by the `catch` method.

**Enhanced Asynchronous Programming: async, await**

**Understanding async/await:**

While promises exist as objects, async/await is a concept applied to functions.

A function returning a promise using async/await:

```js
async function getData() {
  return 123 //Promise {<fulfilled>: 123}
}
getData().then((data) => console.log(data)) // 123 Promise {<fulfilled>: undefined}
```

- A function returning a promise using async/await:

```js
async function getData() {
  return Promise.resolve(123)
}
getData().then((data) => console.log(data))
```

Similar to the `then` method of promises, if the value returned within the async/await function is a promise, that object will be returned as is.

- Cases where exceptions occur in async/await functions:

```js
async function getData() {
  throw new Error('123')
}
getData().catch((error) => console.log(error))
// Error : 123
```

- Using the `await` keyword:

```js
function requestData(value) {
  return new Promise((resolve) =>
    setTimeout(() => {
      console.log('requestData:', value)
      resolve(value)
    }, 100)
  )
}
async function getData() {
  const data1 = await requestData(10) //1
  const data2 = await requestData(20) //1
  console.log(data1, data2) // 2
  return [data1, data2]
}
getData()
// requestData: 10 // 3
// requestData: 20 // 3
// 10, 20  // 3
```

In the first instance, the code in the second instance will not execute until the promise returned by `requestData` is fulfilled. Therefore, the result of calling the `getData` function is reflected in the third instance.

The `async` keyword can only be used within async/await functions. Using it in a regular function will cause an error.

- `await` 키워드는 async 키워드 없이 사용 할 수 없다.

```js
function getData(){
  const data = await requestData(10); // Error
  console.log(data);
}
```

**async/await is more readable than promises.**

- Comparing async/await and Promises

```js
function getDataPromise() {
  asyncFunc1()
    .then((data) => {
      console.log(data)
      return asyncFunc2()
    })
    .then((data) => {
      console.log(data)
    })
} // 1번 프로미스로 작성한 코드
async function getDataAsync() {
  const data1 = await asyncFunc1()
  console.log(data1)
  const data2 = await asyncFunc2()
  console.log(data2)
} // 2번 async await로 작성한 코드
```

The code written using async/await has better readability. The reason for its conciseness is that async/await functions do not require calling the `then` method.

- Comparing Readability in Highly Dependent Code

```js
function getDataPromise() {
  return asyncFunc1()
  .then(data1 => Promise.all([data1, asyncFunc2(data1)])) // 1
  .then([data1, data2]) => {
    return asyncFunc3(data1,data2);
   });
}
async function getDataAsync() { // 2
  const1 data1 = await asyncFunc1();
  const2 data2 = await asyncFunc2(data1);
  return asyncFunc3(data1, data2);
}

```

In 1, `Promise.all` is used to pass two return values to the `asyncFunc3` function. In 2, the async/await function remains intuitive even with complex dependencies.

**Using async/await Effectively**

- Running Asynchronous Functions in Parallel

* Sequentially running asynchronous code

```js
async function getData() {
  const data1 = await asyncFunc1()
  const data2 = await asyncFunc2()
  // ...
}
```

If there are no dependencies between the two functions, it is better to run them simultaneously. Promises execute asynchronously as soon as they are created. Therefore, by creating two promises first and using the `await` keyword later, we can achieve parallel execution.

- Running Asynchronous Code in Parallel by Using `await` Later

```js
async function getData() {
  const p1 = asyncFunc1()
  const p2 = asyncFunc2()
  const data1 = await p1
  const data2 = await p2
}
```

- Using `Promise.all` to Process in Parallel

```js
async function getData() {
  const [data1, data2] = await Promise.all([asyncFunc1(), asyncFunc2()])
  // ....
}
```

- Handling Exceptions
  It is advisable to handle exceptions occurring within async/await functions using try/catch blocks. 
  Both synchronous and asynchronous functions can be handled in the catch block.

```js
async function getData() {
  try {
    await doAsync()
    return doSync()
  } catch (error) {
    console.log(error)
  }
}
```

All exceptions that occur in asynchronous and synchronous functions are handled in the catch block.

- Support for Thenables in async/await

Thenables are objects that behave like promises.

- Example of Using Thenables in async/await Functions

```js
class ThenableExample {
  then(resolve, reject) {
    // 1번
    setTimeout(() => resolve(123), 1000)
  }
}
async function asyncFunc() {
  const result = await new ThenableExaple() // 2번
  console.log(result) // 123
}
```

In 1, the `ThenableExample` class has a `then` method, so any object created from the `ThenableExample` class is considered a Thenable. In 2, the async/await function treats Thenables like promises.

- Difference Between sync/await and Promises
  Promise: Ignores the execution of the code when it is encountered and continues executing the next code.
  async/await: When it encounters await, it waits until the code is finished (until the request is completed, until it is not pending) before executing the next code.

---
title: '자바스크립트에서의 비동기처리'
author: '임훈'
date: 2022-05-05T19:53:35+09:00
category: ['POSTS']
tags: ['Javascript']
og_image: "/images/gamer.png" 
keywords: ['Javascript']
---

**Promise**

자바스크립트 ES6이후에 등장하게 된 promise객체는 비동기 처리 작업 할 때 콜백함수가 쌓이게되는 콜백지옥을 해결하기 위해 처음 등장이 되었다.

같은 원리이지만, promise객체를 통해 더 가독성이 쉽게 표시할 수 있어서 이용하게 되었고,

promise 또한 많은 promise변수를 사용하여 리턴하게 되면 promise지옥을 경험 할 수 있다.

**콜백함수, promise, async/await의 응답속도**

콜백함수나 promise의 응답속도는 거의 같다.

처음 호이스팅 환경에서 차례로 읽기 때문에 비동기 처리 되는 영역은 처리 완료 되지 않은 상태에서 다음을 읽는다. 따라서, setTimeout함수와 같이 딜레이를 주게 되어도 응답속도는 딜레이를 무시하고 먼저 처리한다.

콜백함수와 promise의 응답속도가 거의 같다고 하는 이유는, 브라우저의 환경 차이로 인해서 미세한 속도 차이가 발생 할 수 있다.

전체응답속도는 async/await는 모든 비동기작업(setTimeout과 같은 딜레이 작업들)이 끝나고 순서대로 처리가 완료 된다. 따라서, 처리완료되는 속도는 가장 느리다고 할 수 있다.

**콜백함수**

콜백함수를 이해하기 위해서는 먼저 '호이스팅'에 대해 이해 해야 한다.

**호이스팅**

함수 안에 있는 선언들을 모두 끌어올려서 해당 함수 유효범위의 최상단에 선언하는 것.

*함수가 실행되기 전에 함수에 필요한 모든 값을 최상단에 선언한다.*

**setTimeout(callback , time)**

브라우저 API

callback 함수를 time(ms단위) 이후 출력한다.

**동기(Synchronous)와 비동기(Asynchronous)**

자바스크립트는 Synchronous 이다.

Synchronous callback

```jsx
console.log('1')
setTimeout(() => console.log('2'), 1000)
console.log('3')

function printImmediately(print) {
  print()
}
printImmediately(() => console.log('hello'))
```

호이스팅 결과.

```jsx
function printImmediately(print) {
  // 1. 호이스팅 함수선언문
  print()
}
console.log('1') // 2. '1' 출력
setTimeout(() => console.log('2'), 1000) // 3. 브라우저API에 1초후에 '2' 출력 요청
console.log('3') // 4. '3' 출력
printImmediately(() => console.log('hello')) // 5. 함수 즉시출력 실행 'hello' 출력
// 6. 1초 후, 브라우저API에 의해 '2' 출력
```

Asynchronous callback

```jsx
console.log('1')
setTimeout(() => console.log('2'), 1000)
console.log('3')

function printImmediately(print) {
  print()
}
printImmediately(() => console.log('hello'))
function printWithDelay(print, timeout) {
  setTimeout(print, timeout)
}

printWithDelay(() => console.log('async callback'), 2000)
```

호이스팅 결과
호이스팅 결과

```jsx
function printImmediately(print) {
  print()
}
function printWithDelay(print, timeout) {
  setTimeout(print, timeout)
}

console.log('1') // 동기
setTimeout(() => console.log('2'), 1000) // 비동기------------>
console.log('3') // 동기
printImmediately(() => console.log('hello')) // 동기
printWithDelay(() => console.log('async callback'), 2000) // 비동기 ------------->
```

**Promise**

Promise는 "비동기 상태를 값으로 다룰 수 있는 객체"

Promise가 왜 필요한가요?

프로미스는 주로 서버에서 받아온 데이터를 화면에 표시할 때 사용합니다. 일반적으로 웹 애플리케이션을 구현할 때 서버에서 데이터를 요청하고 받아오기 위해 API를 사용합니다.

콜백 패턴의 문제

1. 콜백 함수의 중첩 사용

```jsx
function requestData1(callback) {
  callback(data) // 2
}
function requestData2(callback) {
  callback(data) // 4
}
function onSuccess1(data) {
  console.log(data)
  requestData2(onSuccess2) // 3
}
function onSuccess2(data) {
  // 5
  console.log(data)
}
requestData1(onSuccess1) // 1
// 콜백 패턴의 코드의 흐름이 순차적이지 않기 때문에, 코드를 읽기가 힘들다.
```

1. 간단한 프로미스 코드 예

```jsx
requestData1()
  .then((data) => {
    console.log(data)
    return requestData2()
  })
  .then((data) => {
    console.log(data)
  })
```

1. 프로미스의 세 가지 상태

- pending : 대기
- fulfilled : 수행이 정상적으로 끝났고 결과값 존재
- rejected : 수행이 비정상적으로 끝났음.
- settled : 이행됨 , 거부됨 상태
  프로미스는 처리 됨 상태가 되면 더 이상 다른 상태로 변경되지 않는다. 대기 중 상태일 때만 이행됨 또는 거부됨 상태로 변할 수 있다.

2. 프로미스를 생성하는 방법

```js
const p1 = new Promise((resolve, reject) => {
  resolve(data)
  // or reject('error message')
})
const p2 = Promise.reject('error message')
const p3 = Promise.resolve(param)
```

3. Promise.resolve 반환 값

```js
const p1 = Promise.resolve(123)
console.log(p1 !== 123) // true 이행됨 상태인 프로미스가 반환된다.
const p2 = new Promise((resolve) => setTimeout(() => resolve(10), 1))
console.log(Promise.resolve(p2) === p2) // true
// Promise.resolve 함수에 프로미스가 입력되면 그 자신이 반환된다.
```

4. 프로미스 이용하기 .then
   then은 처리 됨 상태가 된 프로미스 처리 할 때 사용되는 메서드.

```js
//requestData().then(onResolve, onReject);
// 프로미스 처리됨 상태가 되면, onResolve 함수가 호출되고, 거부됨 상태가 되면 onReject 함수가 호출 된다.
Promise.resolve(123).then((data) => console.log(data)) // 123
Promise.reject('err').then(null, (error) => console.log(error)) // err
```

5. 연속해서 then 메서드 호출하기

```js
let requestData1 = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve('hun')
  }, 1000)
})
let requestData2 = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve('jenny')
  }, 2000)
})

requestData1
  .then((data) => {
    console.log(data)
    return requestData2 // 1
  })
  .then((data) => {
    return data + 1 // 2
  })
  .then((data) => {
    throw new Error('some Error') // 3
  })
  .then(null, (error) => {
    console.log(error)
  })
```

1. 함수에서 프로미스를 반환하면 then메서드는 그 값을 그대로 반환한다.
2. 프로미스가 아닌 값을 반환하면, then 메서드는 이행됨 상태인 프로미스를 반환한다.
3. 함수 내부에서 예외가 발생하면 then 메서드는 거부됨 상태인 프로미스를 반환한다.

4. 거부됨 상태가 되면 onReject 함수를 호출한다.

```js
Promise.reject('err')
  .then(() => console.log('then 1')) // 1번
  .then(() => console.log('then 2')) // 1번
  .then(
    () => console.log('then 3'),
    () => console.log('then 4')
  ) // 2번
  .then(
    () => console.log('then 5'),
    () => console.log('then 6')
  ) // 3번
```

거부 됨 상태인 프로미스는 처음으로 만나는 onReject 함수를 호출 하므로 1번 이 생략되고, 2번 코드의 then 4가 출력 된다.
then 4를 출력하는 함수는 undefined 를 결과로 가지면서 이행됨 상태인 프로미스를 생성한다.
3번 따라서 이어지는 then 메서드에서는 then 5가 출력된다.
then 메서드의 가장 중요한 특징은 항상 연결된 순서대로 호출된다는 점이다.

6. 프로미스 이용하기 2 : catch
   catch는 프로미스 수행 중 발생한 예외를 처리하는 메서드이다. catch메서드는 then 메서드의 onReject 함수와 같은 역할을 한다.

```js
Promise.reject(1).then(null, (error) => {
  console.log(error)
})
Promise.reject(1).catch((error) => {
  console.log(error)
})
```

예외 처리는 then메서드의 onReject를 이용하기보다는, catch메서드를 이용하는게 가독성 면에서 좋다.

7. then 메서드의 onReject를 사용했을 때 문제점.

```js
Promise.resolve().then(
  () => {
    // 1번
    throw new Error('some error')
  },
  (error) => {
    // 2번
    console.log(error)
  }
)
```

1번 then 메서드의 resolve 함수에서 발생한 예외는 같은 then 메서드의 2번 reject함수에서 처리되지 않는다.
실행하면 Unhandled promise rejection 에러가 발생한다. 거부됨 상태인 프로미스를 처리하지 않았기 때문이다.

8. onReject 함수를 사용하지 않고 catch를 사용한 예

```js
Promise.resolve()
  .then(() => {
    throw new Error('some error')
  })
  .catch((error) => {
    console.log(error)
  })
```

9. catch 메서드 이후에도 then 메서드 사용하기

```js
Promise.reject(10)
  .then((data) => {
    console.log('then1:', data)
    return 20
  })
  .catch((error) => {
    console.log('catch:', error)
    return 30
  })
  .then((data) => {
    console.log('then2:', data)
  })
// catch: 10
// then2: 30
```

프로미스 이용하기 3 : finally

- finally를 사용한 간단한 코드

```js
requestData()
.then(data => {
	...
})
.catch(error => {
	...
})
.finally(() => {
	...
});

```

- finally 메서드는 새로운 프로미스를 생성하지 않는다.

```js
function requestData(){
  return fetch()
    .catch(error => {
		...
	})
    .finally(() => {
	senLogToServer('requestData finished')
	})
  }
 requestData().then(data => console.log(data)); // 1번

```

1번, requestData 함수의 반환값은 finally 메서드 호출 이전의 프로미스다. 따라서, requestData함수를 사용하는 입장에서는 finally 메서드 존재 여부를 신경 쓰지 않아도 된다.

**프로미스 활용하기**

**병렬로 처리하기 : Promise.all**

Promise.all은 여러 개의 프로미스를 병렬로 처리할 때 사용되는 함수이다. then 메서드를 체인으로 연결하면 각각 비동기 처리가 병렬로 처리되지 않는 단점을 극복한다.

- 순차적으로 실행되는 비동기 코드

```js
requestData1()
  .then((data) => {
    console.log(data)
    return requestData2()
  })
  .then((data) => {
    console.log(data)
  })
```

비동기 함수 간에 서로 의존성이 없다면, 병렬로 처리하는게 더 빠르다. then 메서드를 체인으로 연결하지 않고, 비동기함수를 각각 호출하면, 병렬로 처리 된다.

- 병렬로 실행 되는 코드

```js
requestData1().then((data) => {
  console.log(data)
})
requestData2().then((data) => {
  console.log(data)
})
```

requestData1과 requestData2는 동시에 실행 된다. 여러 프로미스를 병렬로 처리하고 싶을 경우 Promise.all을 사용하자.

- Promise.all 을 사용하는 코드

```js
Promise.all([requestData1(), requestData2()]).then(([data1, data2]) => {
  console.log(data1, data2)
})
```

Promise.all 함수는 프로미스를 반환한다.
Promise.all 함수가 반환하는 프로미스는 입력된 모든 프로미스가 처리됨 상태가 되어야 마찬가지로 처리됨 상태가 된다.
만약 하나가 거부됨 상태가 된다면, Promise.all 함수가 반환하는 프로미스도 거부됨 상태가 된다.

**가장 빨리 처리된 프로미스 가져오기 : Promise.race**

Promise.race 함수에 입력된 여러 프로미스 중에서 하나라도 처리됨 상태가 되면, Promise.race 함수가 반환하는 프로미스도 처리됨 상태가 된다.

- Promise.race를 사용한 간단한 코드

```js
Promise.race([
  requestData(),
  new Promise((_, reject) => setTimeout(reject, 3000)),
])
  .then((data) => console.log(data))
  .catch((error) => console.log(error))
```

requestData 함수가 3초안에 데이터를 받으면 then메서드가 호출되고 그렇지 않으면 catch 메서드가 호출 된다.

**프로미스를 이용한 데이터 캐싱**

처리됨 상태가 되면, 그 상태를 유지하는 프로미스의 성질을 이용해서 데이터를 캐싱할 수 있다.

- 프로미스로 캐싱 기능 구현하기.

```js
let cachedPromise
function getData() {
  cachedPromise = cachedPromise || requestData() // 1번
  return cachedPromise
}
getData().then((v) => console.log(v))
getData().then((v) => console.log(v))
```

1번 getData 함수를 처음 호출 할 때만, requestData가 호출된다. 데이터를 가져오는 작업이 끝나면, 그 결과는 cachedPromise 프로미스에 저장된다.

**프로미스 사용 시 주의 할 점**

- return 키워드 깜빡하지 않기.
  then 메서드 내부 함수에서 return 키워드를 입력하는 것을 깜빡하기 쉽다.
  then 메서드가 반환하는 프로미스 객체의 데이터는 내부함수가 반환한 값이다.
  return 키워드를 사용하지 않으면 프로미스 객체의 데이터는 undefined가 된다.

- return 키워드를 깜빡한 코드

```js
Promise.resolve(10)
  .then((data) => {
    console.log(data)
    Promise.resolve(20) // 2번
  })
  .then((data) => {
    console.log(data) // 1번
  })
```

1번은 의도와는 다르게 undefined가 출력 된다.
2번 코드에서 return 키워드를 입력하면 의도한 대로 20이 출력 된다.

- 프로미스는 불변 객체라는 사실 명심하기
  프로미스는 불변 객체이다.

- 프로미스가 수정된다고 생각하고 작성한 코드

```js
function requestData() {
  const p = Promise.resolve(10)
  p.then(() => {
    //  1번
    return 20
  })
  return p
}
requestData().then((v) => {
  console.log(v) // 10 // 2번
})
```

1번 then 메서드는 기존 객체를 수정하지 않고, 새로운 프로미스를 반환한다. 2번, 코드에서 20이 출력되길 원한다면 requestData 함수를 다음과 같이 수정해야 한다.

- then 메서드로 생성된 프로미스를 반환하는 코드.

```js
function requestData() {
  return Promise.resolve(10).then((v) => {
    return 20
  })
}
```

- 프로미스를 중첩해서 사용하지 않기
  프로미스를 중첩해서 사용하면 콜백 헬과같이 프로미스 헬이 발생한다.

  ```js
  requestData1().then(result1 => {
    requestData2(result2 => {
  		....
   });
  });

  ```

가독성이 좋지 않기 때문에, 아래 24번과 같이 바꾸자.

- 중첩된 코드를 리팩터링 한 코드

```js
requestData1()
  .then(result1 => {
	return requestData2(result1)
})
  .then(result2 => {
	return ... // 1번
})
```

만약 1번, 에서 result1 변수를 참조 해야 한다면 어떻게 해야 할까?

- Promise.all 함수를 사용하면 프로미스를 중첩하지 않고도 해결할수 있다.

- Promise.all을 사용해서 변수 참조 문제를 해결한 코드

```js
requestData1()
 .then(result1 => {
  return Promise.all([result1, requestData2(result1)]) // 1번
  .then(([result1, result2]) => {
    ...........
});
```

1번, Promise.all 함수로 입력하는 배열에 프로미스가 아닌 값을 넣으면, 그 값을 그대로 이행됨 상태인 프로미스처럼 처리된다.

**동기 코드의 예외 처리 신경 쓰기**

프로미스를 동기(sync)코드와 같이 사용할 때는 예외 처리에 신경 써야 한다.

- 동기 코드에서 발생한 예외가 처리되지 않는 코드.

```js
function requestData() {
  doSync() // 1번
  return fetch()
    .then((data) => console.log(data))
    .catch((error) => console.log(error))
}
```

1번, doSync 함수가 반드시 fetch 전에 호출되어야 하는게 아니라면 다음과 같이 then 메서드 안에 넣어주는게 좋다.

- 동기 코드도 예외처리가 되는 코드

```js
function requestData() {
  return fetch()
    .then((data) => {
      doSync()
      console.log(data)
    })
    .catch((error) => console.log(Error))
}
```

doSync에서 발생하는 예외는 catch 메서드에서 처리가 된다.

**향상된 비동기 프로그래밍 async, await**

async await 이해하기

프로미스는 객체로 존재하지만, async await는 함수에 적용되는 개념이다.

프로미스를 반환하는 async await 함수

```js
async function getData() {
  return 123 //Promise {<fulfilled>: 123}
}
getData().then((data) => console.log(data)) // 123 Promise {<fulfilled>: undefined}
```

- 프로미스를 반환하는 async await 함수

```js
async function getData() {
  return Promise.resolve(123)
}
getData().then((data) => console.log(data))
```

프로미스의 then 메서드와 마찬가지로 async await 함수 내부에서 반환하는 값이 프로미스라면 그 객체를 그대로 반환한다.

- async await 함수에서 예외가 발생하는 경우.

```js
async function getData() {
  throw new Error('123')
}
getData().catch((error) => console.log(error))
// Error : 123
```

- await 키워드를 사용하는 방법

```js
function requestData(value) {
  return new Promise((resolve) =>
    setTimeout(() => {
      console.log('requestData:', value)
      resolve(value)
    }, 100)
  )
}
async function getData() {
  const data1 = await requestData(10) //1번
  const data2 = await requestData(20) //1번
  console.log(data1, data2) // 2번
  return [data1, data2]
}
getData()
// requestData: 10 // 3번
// requestData: 20 // 3번
// 10, 20  // 3번
```

1번, requestData 함수가 반환하는 프로미스가 처리됨 상태가 될 때 까지 2번,의 코드는 실행되지 않는다. 따라서 getData 함수를 호출 한 결과는 3번,이다.

async 키워드는 오직 async await 함수 내에서만 사용할 수 있다. 일반함수에서 사용하면 에러가 발생한다.

- await 키워드는 async 키워드 없이 사용 할 수 없다.

```js
function getData(){
  const data = await requestData(10); // 에러 발생
  console.log(data);
}
```

**async await는 프로미스보다 가독성이 좋다.**

- async await와 프로미스 비교하기

```js
function getDataPromise() {
  asyncFunc1()
    .then((data) => {
      console.log(data)
      return asyncFunc2()
    })
    .then((data) => {
      console.log(data)
    })
} // 1번 프로미스로 작성한 코드
async function getDataAsync() {
  const data1 = await asyncFunc1()
  console.log(data1)
  const data2 = await asyncFunc2()
  console.log(data2)
} // 2번 async await로 작성한 코드
```

가독성이 async await로 작성 한 코드가 좋다.
간결한 이유는 async await 함수는 then 메서드를 호출할 필요가 없기 때문이다.

- 의존성이 높은 코드에서 가독성 비교하기

```js
function getDataPromise() {
  return asyncFunc1()
  .then(data1 => Promise.all([data1, asyncFunc2(data1)])) // 1번
  .then([data1, data2]) => {
    return asyncFunc3(data1,data2);
   });
}
async function getDataAsync() { // 2번
  const1 data1 = await asyncFunc1();
  const2 data2 = await asyncFunc2(data1);
  return asyncFunc3(data1, data2);
}

```

1번, 두 반환값을 asyncFunc3 함수에 전달하기 위해 Promise.all을 사용했다.
2번, async await함수는 복잡한 의존성이 존재함에도 코드가 직관적이다.

**async await 활용하기**

- 비동기 함수를 병렬로 실행하기.

* 순차적으로 실행되는 비동기 코드

```js
async function getData() {
  const data1 = await asyncFunc1()
  const data2 = await asyncFunc2()
  // ...
}
```

두 함수사이에 의존성이 없다면, 동시에 실행하는게 더 좋다.
프로미스는 생성과 동시에 비동기 코드가 실행된다.
따라서, 두 개의 프로미스를 먼저 생성하고 await 키워드를 나중에 사용하면 병렬로 실행되는 코드가 된다.

- await 키워드를 나중에 사용해서 병렬로 실행되는 비동기 코드

```js
async function getData() {
  const p1 = asyncFunc1()
  const p2 = asyncFunc2()
  const data1 = await p1
  const data2 = await p2
}
```

- Promise.all을 사용해서 병렬로 처리하기

```js
async function getData() {
  const [data1, data2] = await Promise.all([asyncFunc1(), asyncFunc2()])
  // ....
}
```

- 예외 처리하기
  async await 함수 내부에서 발생하는 예외는 try catch 문으로 처리하는게 좋다.
- 동기와 비동기 함수 모두 catch 문에서 처리된다.

```js
async function getData() {
  try {
    await doAsync()
    return doSync()
  } catch (error) {
    console.log(error)
  }
}
```

비동기함수와 동기함수에서 발생하는 모든 예외가 catch문에서 처리된다.

- Thenable을 지원하는 async await
  Thenable은 프로미스 처럼 동작하는 객체다.

- async await 함수에서 Thenable을 사용한 예

```js
class ThenableExample {
  then(resolve, reject) {
    // 1번
    setTimeout(() => resolve(123), 1000)
  }
}
async function asyncFunc() {
  const result = await new ThenableExaple() // 2번
  console.log(result) // 123
}
```

1번 ThenableExample 클래스는 then 메서드를 가지고 있으므로, ThenableExample 클래스로 생성된 객체는 Thenable이다. 2번 async await 함수는 Thenable도 프로미스 처럼 처리한다.

- sync/await , promise 차이
  promise : 코드 실행 중에 만나더라도 무시하고 다음 코드를 실행한다.
  async-await : await을 만났을 때 ,해당 코드가 끝날때까지(요청이 마무리 될 떄까지, pending이 아닐떄까지) 기다렸다 코드를 실행한다.