async 함수 안에서 쓰는 await

2023. 3. 18. 15:42· Javascript
async / await

 

async / await 는 프로미스 대신 요긴하게 쓸수 있다

async 를 function 앞에 붙이면 함수 실행후에 Promise 오브젝트가 남습니다

같이 쓰이는 await는 프로미스가 성공할때까지 기다려주며, 항상 async 함수 안에서만 씁니다

async function 더하기(){ 
 //new Promise()어쩌구~ 디자인 안해도 'async'를 함수 앞에 붙이면 함수가 프로미스기능
  return 1+1;
}

더하기().then(function(결과){ //.then()사용가능! 왜? async 함수가 있으면 프로미스를 뱉어내니까
 console.log(결과)
})

// async 는 성공만 판정가능
//return Promise.reject() 실패판정하면, 에러를 일으킴
async 안에서 쓰는 await!
//함수 안에서 프로미스 디자인 하기
async function 더하기(){

  var 프로미스 = new Promise(function(성공, 실패){
    var 힘든연산 = 1+1;
    성공(100);
  });

  // async function 안에서 쓰는 await, then() 대신에 활용가능
  var 결과 = await 프로미스; // 프로미스가 해결되길 기다려주셈~
  console.log(결과);

  /*
  위에랑 같은 코드
  프로미스.then(function(){ //프로미스 내의 연산이 성공하면 이 코드를 실행시켜주세요~
    console.log('성공했어요')
  });
  */
}

 

 

만약 프로미스가 실패판정이 나면 어떻게 할까?
async function 더하기(){

var 프로미스 = new Promise(function(성공, 실패){
  var 힘든연산 = 1+1;
  실패(100);
});

// async function 안에서 쓰는 await, then() 대신에 활용가능
var 결과 = await 프로미스; // 여기서 에러남! await은 프로미스 실패시 에러나고 멈춤
console.log(결과);
}

 

 

실패판정에 대처하는법? try{} catch{}
async function 더하기(){

var 프로미스 = new Promise(function(성공, 실패){
  var 힘든연산 = 1+1;
  실패(100);
});

//try{ 이걸해보고에러나면 } catch{이걸실행해주세요}
try{var 결과 = await 프로미스; 
console.log(결과);
}catch{
  console.log('프로미스 연산이 잘안되었군요') //실패판정 후, try에서 프로미스 에러, 다음인 catch 실행
}
}

 

 

 

 

 

예제
Q.<button>을 누르면 성공판정하는 promise 디자인해보자. 성공시 '성공했어요'를 출력하려면?
<button id = 'button'>지은이</button>

<script>
async function 더하기(){
  var 프로미스 = new Promise(function(성공,실패){
  document.getElementById('button').addEventListener('click',function(){
    성공('성공했어요');//성공판정시 '성공했어요' 인자로 전달
  })
  });

  var 결과 = await 프로미스; //프로미스 성공까지 기달
  console.log(결과); //인자 전달받음
}

더하기(); //더하기 함수 호출

</script>

'Javascript' 카테고리의 다른 글

자바스크립트 초보자 실수정리  (0) 2023.03.18
버튼 누르면 알림창 뜨게 만들기  (0) 2023.03.18
Promise(=성공/실패 판정기계)  (0) 2023.03.18
비동기처리와 순차적으로 실행해주는 콜백함수  (0) 2023.03.16
Beesbeesbees 과제풀이  (2) 2023.03.16
'Javascript' 카테고리의 다른 글
  • 자바스크립트 초보자 실수정리
  • 버튼 누르면 알림창 뜨게 만들기
  • Promise(=성공/실패 판정기계)
  • 비동기처리와 순차적으로 실행해주는 콜백함수
becky(지은)
becky(지은)
becky(지은)
Know yourself, follow your passion
becky(지은)
전체
오늘
어제
  • 코딩 (187)
    • Clean Code (6)
    • American TV series (1)
    • Java (10)
    • Android (6)
    • php (3)
    • Javascript (54)
    • typescript (6)
    • React (45)
    • Web system (13)
    • Github (6)
    • Figma (3)
    • Algorithm (1)
    • Code States 44 (12)
    • reflect on myself (4)
    • ai (16)

블로그 메뉴

  • 홈
  • 태그
  • 방명록

공지사항

인기 글

태그

  • props사용법
  • 언어모델 성능평가
  • 자동형변환
  • 자바스크립트
  • 프로토타입
  • 자바별찍기
  • redux-toolkit
  • 상속
  • 팀노바
  • 생성자 함수
  • 코딩애플
  • 생활코딩 객체지향프로그래밍
  • 쇼핑몰
  • 코드스테이츠
  • 기술면접
  • 객체상속
  • 코딩스터디
  • 파트와 한 일
  • 배치크기
  • 코드스테이츠피그마
  • 멀티턴 데이터구조
  • 생활코딩객체지향
  • 클린코드
  • 제이쿼리
  • 파인튜닝기술면접
  • 축약된 프롬프트 구조
  • 역할기반 멀티턴 데이터
  • 생활코딩객체지향프로그래밍
  • JavaScript
  • 배치크기면접

최근 댓글

최근 글

hELLO · Designed By 정상우.v4.2.2
becky(지은)
async 함수 안에서 쓰는 await
상단으로

티스토리툴바

단축키

내 블로그

내 블로그 - 관리자 홈 전환
Q
Q
새 글 쓰기
W
W

블로그 게시글

글 수정 (권한 있는 경우)
E
E
댓글 영역으로 이동
C
C

모든 영역

이 페이지의 URL 복사
S
S
맨 위로 이동
T
T
티스토리 홈 이동
H
H
단축키 안내
Shift + /
⇧ + /

* 단축키는 한글/영문 대소문자로 이용 가능하며, 티스토리 기본 도메인에서만 동작합니다.