23_11_20 JS공부정리

[코딩애플] 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 src="https://code.jquery.com/jquery-3.4.1.min.js"></script>

<script>

let Promise6 = new Promise(function(resolve,reject){

    $.ajax({

    type : 'GET',

    url : 'https://code.jquery.com/jquery-3.4.1.min.js'

    }).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',

    url : 'https://codingapple1.github.io/hello.txt'

    }).done(function(결과){

        resolve(결과)

    })

})

Promise6.then(function(결과){

    console.log(결과)

    let Promise7 = new Promise(function(resolve,reject){ //안에 새로운 promise를 만들어서 반환

    $.ajax({

        type : 'GET',

        url : 'https://codingapple1.github.io/hello2.txt'

    }).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>