Notice
Recent Posts
Recent Comments
Link
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | ||
6 | 7 | 8 | 9 | 10 | 11 | 12 |
13 | 14 | 15 | 16 | 17 | 18 | 19 |
20 | 21 | 22 | 23 | 24 | 25 | 26 |
27 | 28 | 29 | 30 | 31 |
Tags
- 인프런
- DB Browser
- intellij
- node.js로 로그인하기
- props
- 계산맞추기 게임
- react오류
- react
- Colaboratory 글자 깨짐
- googleColaboratory
- vs code 내 node
- intllij 내 Bean을 찾지 못해서 발생하는 오류
- 타자 게임 만들기
- Spring-Framework
- 노드에 리액트 추가하기
- spring-boot
- 거북이 대포 게임
- 따라하며 배우는 노드 리액트 기본 강의
- JS 개념
- Concurrently
- You are importing createRoot from "react-dom" which is not supported. You should instead import it from "react-dom/client"
- node.js 설치
- 모던자바스크립트
- 리액트
- 웹 게임을 만들며 배우는 리액트
- 자바스크립트
- ReactDOM.render is no longer supported in React 18. Use createRoot instead
- 모두의 파이썬
- Do it 자바스크립트 + 제이쿼리 입문
- Python
Archives
- Today
- Total
프로그래밍 삽질 중
비동기 Promise & async await 2 본문
https://www.youtube.com/watch?v=1DGAyl4kxhY&list=PLcqDmjxt30Rt9wmSlw1u6sBYr-aZmpNB3&index=13
참고 : https://ko.javascript.info/async-await
async
- function 앞에 위치
- function 앞에 async가 있으면 항상 프라미스(promise) 반환
await
- async 함수 안에서만 동작함
- 프라미스가 처리될 때까지 함수 실행을 기다리게 만듦
- promise.then보다 보다 가독성이 좋고 쓰기 쉬우면서 promise의 result값을 얻을 수 있게 함
[예제 1]
//기본 코드
function loadJson(url) {
return fetch(url)
.then(response => {
if (response.status == 200) {
return response.json();
} else {
throw new Error(response.status);
}
})
}
loadJson('no-such-user.json')
.catch(alert); // Error: 404
//promise로 변경
async function loadJson(url) {
let response = await fetch(url)
if (response.status == 200) {
return await response.json();
return json;
}
throw new Error(response.status);
}
loadJson('no-such-user.json')
.catch(alert); // Error: 404
[예제 1-1]
async function wait() {
await new Promise(resolve => setTimeout(resolve, 1000));
return 10;
}
function f() {
// ...코드...
// async wait()를 호출하고 그 결과인 10을 얻을 때까지 기다리려면 어떻게 해야 할까요?
// f는 일반 함수이기 때문에 여기선 'await'를 사용할 수 없다는 점에 주의하세요!
}
//정답
async function wait() {
await new Promise(resolve => setTimeout(resolve, 1000));
return 10;
}
function f() {
wait().then(result => alert(result)) //10
}
[예제 2]
function delayP(ms) {
return new Promise((resolve, reject) => {
//동기부분
setTimeout(resolve, ms);
reject(err);
});
}
//async
async function a() {
console.log("2"); //동기
const a = await 1; //await을 then으로 생각, async가 끝나는 건 이 곳(동기)(첫 번째 await전에 끝남)
//처음 나오는 await이 axios.get이면 Promose.resolve가 아니라 axios.get으로 쓰면 됨
//나머지는 비동기
console.log("4") //비동기
console.log("a", a);
console.log("hmm");
await null;
const b = await Promise.resolve(1);
console.log("b", b);
return a+b; //2
}//(비동기)
console.log("1")
a() //then 5개 있다
.then((result) => {
console.log(result); //2
})
.then((result2) => {
console.log(result2); //undefined
});
console.log("3")
//출력결과
//1
//2
//3
//4
//a 1
//hmm
//b 1
//2
//undefined
[예제 3]
//async await을 promise로 바꿀 경우(완벽하게 바꾸는 건 아님)
//async await
async function a() {
const a = await 1; //await을 then으로 생각, async가 끝나는 건 이 곳(동기)(첫 번째 await전에 끝남)
//처음 나오는 await이 axios.get이면 Promose.resolve가 아니라 axios.get으로 쓰면 됨
//나머지는 비동기
console.log("a", a);
console.log("hmm");
await null;
const b = await Promise.resolve(1);
console.log("b", b);
return b;
}//(비동기)
//promise
const a = Promise.resolve(1) //프로미스화
.then((a) => {
//await이 붙이면 다 비동기
//await에서 대입하는 변수를 then안에 적어둠
//await과 await 사이에 전부를 넣을 것
console.log("a", a);
console.log("hmm");
return null;
})
.then(() => {
//대입한 값이 없으므로 비워둠
return Promise.resolve(1);
})
.then((b) => {
console.log("b", b);
return b; //단 a+b를 하면 오류남(정확하게 async await과 promise가 연결된 건 아님)
}).then((result) => {
console.log(result);
})
.then((result2) => {
console.log(result2);
});
//결과
//a 1
//hmm
//b 1
//1
//undefined
'과거 프로그래밍 자료들 > Javascript&typescript' 카테고리의 다른 글
TypeScript 개념 - 1 (0) | 2022.09.15 |
---|---|
호출스택, 이벤트루프, 태스크큐, 백그라운드 (0) | 2022.09.15 |
비동기 Promise & async await 1 (0) | 2022.09.14 |
this 내용 정리 (0) | 2022.09.10 |
스코프 체인 (0) | 2022.09.09 |