# 자바스크립트 비동기
## 동기 vs 비동기
자바스크립트는 기본적으로 Synchronous-nonblocking으로 동작합니다.
## Promise
* 비동기 기능/연산에 사용하는 자바스크립트 객체
* 연산이 실행은 되었지만 결과를 아직 반환하지 않은 객체
* then을 붙이면 결과를 반환함. (resolve 콜백 함수의 리턴값을 받음)
* catch를 붙이면 에러를 반환함. (reject 콜백 함수의 리턴값을 받음)
Promise의 상태
```jsx
const promise = new Promise((resolve, reject) => {
if (condition) {
resolve("성공"); // then으로 연결
} else {
reject("실패"); // catch로 연결
}
})
const onClickButton = () => {
promise
.then((message) => {
console.log(message);
})
.catch((error) => {
console.log(error);
});
}
```
## **async & await**
* Promise를 좀 더 쉽게 사용할 수 있는 방법
* 가장 최근에 나온 JS 비동기 처리 문법
* 꼬리에 꼬리를 무는 then() 지옥에서 탈출할 수 있다.
* **async** 함수의 return 값은 **Promise**
* **await** 은 **Promise가 끝날 때까지 기다리라**는 뜻!
* await은 async 함수 안에서만 동작한다. (top-level await의 경우에는 예외)
```jsx
const asyncDemo = async () => {
if (condition) return "성공";
else throw new Error("실패");
}
const onClickButton2 = () => {
const promise = asyncDemo();
promise
.then((message) => {
console.log(message);
})
.catch((error) => {
console.log(error);
});
}
```
```jsx
const [users, setUsers] = useState([]);
useEffect(() => {
getUsers();
},[]);
const getUsers = async () => {
const data = await axios.get('/users',...);
console.log(data);
setUsers(data.result.userList);
}
return (
users.length > 0 &&
users.map(user => (
{user......}
)
);
```
---
# Agent Instructions: Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.
Perform an HTTP GET request on the current page URL with the `ask` query parameter:
```
GET https://inbroz-charles.gitbook.io/rising-camp-12th-web/week-5/undefined.md?ask=
```
The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.
Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.
