개발공부/JavaScript
23_11_20 JS공부정리
coding-jake
2023. 11. 21. 00:31
[코딩애플] Part3
-Promise : 성공/실패를 판정하는 기계
let Promise = new Promise(function(resolve, reject){
resolve(); //이렇게 쓰면 Promise가 성공함
reject(); //이렇게 쓰면 Promise가 실패함
}); //프로미스 = 성공/실패를 판정하는 기계
Promise.then(function() {
//1번째 실행
}).then(function() {
//2번째 실행
}).catch(function() {
//실패할 경우
}).finally(function() {
//성공이든 실패든 실행하는 함수
})
let Promise2 = new Promise(function(resolve, reject){
let 연산 = 1+1;
resolve(); //'성공했어요'
reject(); //'실패했어요'
})
Promise2.then(function() {
console.log('성공했어요')
}).catch(function() {
console.log('실패했어요')
})
-파라미터를 넣어 연산값을 전달할 수 있음
let Promise3 = new Promise(function(resolve, reject){
let 연산 = 1+1;
resolve(연산); //2
})
Promise3.then(function(결과) {
console.log(결과)
}).catch(function() {
console.log('실패했어요')
})
-Promise을 이용한 비동기 처리(순차적 처리 가능)
let Promise4 = new Promise(function(resolve, reject){
setTimeout(function() {
성공(); //1초후 '성공했어요'
//1초가 지나기전엔 프로미스는 pending, 1초후엔 resolved
}, 1000)
})
Promise4.then(function() {
console.log('성공했어요')
}).catch(function() {
console.log('실패했어요')
})
프로미스의 3가지 상태
1.pending : 판정 대기중이면
2.resolved : 성공했을 때
3.rejected : 실패했을 때
프로미스가 적용된곳들
jQuery.ajax()
fetch()
-이미지 로드상황에서의 Promise 코드 예제
let Promise5 = new Promise(function(resolve, reject) {
document.querySelector('#test').addEventListener("load", ()=> {
resolve();
})
document.querySelector('#test').addEventListener("error", ()=> {
reject();
})
})
Promise5.then(function() {
console.log('성공')
}).catch(function(){
console.log('실패')
})
-제이쿼리 ajax상황에서의 Promise
<script>
let Promise6 = new Promise(function(resolve,reject){
$.ajax({
type : 'GET',
}).done(function(결과){
resolve(결과)
})
})
Promise6.then(function(결과){
console.log(결과)
})
*제이쿼리 ajax문법
$.ajax({
type : 'GET',
url : 'URL 경로'
}).done(function(결과){
console.log(결과);
});
$.get('URL 경로').done(function(결과){
console.log(결과)
});
-Promise 체이닝
let Promise6 = new Promise(function(resolve,reject){
$.ajax({
type : 'GET',
}).done(function(결과){
resolve(결과)
})
})
Promise6.then(function(결과){
console.log(결과)
let Promise7 = new Promise(function(resolve,reject){ //안에 새로운 promise를 만들어서 반환
$.ajax({
type : 'GET',
}).done(function(결과){
resolve(결과)
})})
return Promise7
}).then(function(결과){ //반환한 promsie에 연결하여 .then함수 실행
console.log(결과)
})
-async/await 문법
async function 더하기() { //함수 앞에서만 async를 쓸수있음. 함수실행후 Promise 객체가 남음
console.log(1)
}
더하기().then(function(){
console.log('성공이에요')
})
// 1과 '성공이에요'가 차례로 출력됨.
-return을 이용해 연산결과를 넘겨주기도 가능.
async function 더하기() {
return 1+1
}
더하기().then(function(결과){
console.log(결과) //2출력.
})
but async는 성공만 판정할 수 있음.
async function 더하기(콜백) {
return Promise.reject('실패') //강제적으로 rejected 상태의 promise를 반환할 순 있음.
}
더하기().then(function(결과){
console.log(결과) //error
})
-await사용법(async 안에 Promise를 만들기 가능)
async function 더하기2() {
let Promise = new Promise(function(resolve,reject){
let 힘든연산 = 1+1;
resolve(힘든연산);
})
// Promise.then(function(){
// console.log('성공했어요')
// }) 아래 코드와 동일한 의미
let result = await Promise; //Promise가 해결될때까지 기다림. async 함수 안에서만 사용가능.
console.log(result); //2
}
*Promise가 reject되면 await은 Error가 나고 멈춤. => try {이걸해보고안되면} catch {이거하세요} 문법 사용
async function 더하기2() {
let Promise = new Promise(function(resolve,reject){
let 힘든연산 = 1+1;
reject();
})
try {
let result = await Promise;
console.log(result);
}
catch {
console.log('에러')
}
}
-버튼을 누를때 async 함수가 작동하도록 만들기
<button id="button">버튼</button>
<script>
let Promise1 = new Promise(function(resolve,reject){
document.querySelector('#button').addEventListener("click", function(){
resolve();
})
})
async function 버튼() {
try{
let result = await Promise1; //생성한 Promise의 이름이 들어가야함.
console.log('성공했어요');
} catch {
console.log('에러')
}
}
버튼();
</script>