티스토리 뷰
asycn / await를 사용하면 프라미스를 편하게 사용할 수 있다.
함수에 async를 붙이면 해당 함수는 항상 프라미스를 반환한다.
프라미스가 아닌 값을 반환하더라도 이행상태(resolved promise)로 값을 감싸
이행된(성공한) 프라미스가 반환되도록 한다.
// 일반 함수에서 async 작성법, function 앞에 작성한다
async function test() {
return 7;
}
// 화살표 함수에서 async 작성법, 인수(Parameter)앞에 async를 작성한다.
const test = async() => {
return 7;
}
await와의 활용
await는 말 그대로 프라미스가 처리될 때까지 함수 실행을 기다리게 만듭니다.
프라미스가 처리되면 그 결과와 함께 실행이 재개되죠.
프라미스가 처리되길 기다리는 동안엔 엔진이 다른 일(다른 스크립트를 실행, 이벤트 처리 등)을 할 수 있기 때문에
CPU 리소스가 낭비되지 않습니다. (https://ko.javascript.info/async-await)
async function foo() {
let promise = new Promise((resolve, reject) => {
setTimeout(() => resolve("1초뒤나옴"), 1000)
});
let result = await promise; // 프라미스가 이행될 때까지 기다림
alert(result) // 1초뒤나옴
}
foo();
클래스 메서드에서도 async / await 를 사용할 수 있다
class Person{
async name(){
return await Promise.resolve("bin");
}
}
new Person()
.name()
.then(alert); // bin
에러처리는 일반적으로 try..catch문을 사용한다
async function foo(){
try{
const reponse = await fetch("http://자고싶어라")
const result = await response.json();
console.log(result)
} catch(error){
console.log(error) // 에러 처리
}
}
다음시간엔 fetch()에 대해 알아보자..
출처 : 자바스크립트인포, gpt
'개발공부 > Javascript' 카테고리의 다른 글
#기본기12_클라이언트 사이드 랜더링 / 서버사이드 랜더링 (0) | 2024.04.03 |
---|---|
#기본기11_fetch() (0) | 2024.04.03 |
#기본기9_Promise (0) | 2024.04.03 |
#기본기8_객체에서 속성을 추가하거나 삭제하는 방법 (0) | 2024.04.03 |
#기본기7_배열에서 특정요소를 찾기 (1) | 2024.04.03 |
공지사항
최근에 올라온 글
최근에 달린 댓글
- Total
- Today
- Yesterday
링크
TAG
- promise
- 태스크큐
- 객체속성 추가 삭제
- 조대곤교수님
- 함수형코딩
- 머리아프다..
- .catch()
- unique "key" prop.
- 리액트 이미지경로
- 상속
- 동등비교연산자
- 배열내특정요소찾기
- null과 undefined
- 프로토타입 체이닝
- 전역변수
- 미들웨어위치
- 대괄호표기법
- .then()
- unexpected character
- 함수
- JSX
- react
- 비동기
- 객체리터럴
- .finally()
- universal rendering
- 문자열
- Props
- cors위치
- 에이블스쿨2일차
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
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 |
글 보관함