[ES6]Promise 예제

Q1. <img> 이미지 로딩 성공시 특정 코드를 실행하고 싶습니다.

 

HTML 안에 있는 이미지 로딩이 끝나면 무언가 코드를 실행하고 싶습니다.

 

이 이미지가 로드가 되면 콘솔창에 성공, 로드가 실패하면 콘솔창에 실패를 출력하고 싶은데

Promise 문법의 then, catch 함수를 사용해 만들고 싶습니다. 어떻게 코드를 짜면 될까요?

 

(참고) 이미지 로딩이 끝났다는 것은 <img>에 load라는 이벤트리스너를 붙여서 체크가 가능합니다. 

(참고) 이미지 로딩이 실패했다는 것은 <img>에 error라는 이벤트리스너를 붙여서 체크가 가능합니다.

 

 

 

id가 test인 <img>가 로딩이 되었는지 / 로딩 실패했는지 판단하려면 

 

 

 

이렇게 하면 됩니다. 별거아닙니다.

그럼 이걸 Promise를 이용해서 로딩성공시 .then() 실패시 .catch()를 실행하도록 코드를 짜보도록 합시다. 

 

 

 

이렇게 짤 수 있겠습니다.

프로미스 안에서는 성공(), 실패()가 실행되는 경우의 수를 만들어주시면 되고

그렇게 하면 이제 .then() .catch()를 이용해서 성공/실패시 특정 코드들을 실행할 수 있습니다. 

 

 

 

 

 

 

Q2. Ajax 요청이 성공하면 무언가 코드를 실행하고 싶습니다.

https://codingapple1.github.io/hello.txt 라는 경로로 GET 요청을 하면 인삿말이 하나 딸려옵니다.

여기로 GET 요청을 해서 성공하면

Promise의 then 함수를 이용해서 Ajax로 받아온 인삿말을 콘솔창에 출력해주고 싶습니다.

어떻게 하면 될까요? 

(jQuery done함수 자체에 Promise 기능이 있기 때문에 코드가 약간 중복도 많고 쓸데없을 수 있지만 연습삼아 해봅시다.)

 

 

< 그런데 Ajax 어떻게 사용해요?>

 

일단 jQuery로 Ajax 요청을 하려면 $.ajax혹은 $.get을 쓰시면 됩니다.

(그리고 jQuery 설치 파일이 상단에 첨부되어있어야겠죠?)

 

둘중 하나 마음에 드는거 쓰시면 URL 경로 상에 있는 데이터를 가져올 수 있습니다.

그리고 가져온 데이터를 출력하거나 가져온 후에 특정 코드를 실행하고 싶다면 

 

done함수를 뒤에 붙여서 이렇게 쓰시면 됩니다.

결과라는 파라미터에 여러분이 가져온 데이터가 담겨져있습니다. 

 

 

 

< 그래서 Promise 어떻게 하는데요? >

기계가 완성되었습니다.

이제 프로미스에 then을 붙여서 성공시 뭔가 코드를 실행할 수 있습니다. 

 

 

 

 

 

 

 

 

Q3. Promise chaining

2번 문제에서 https://codingapple1.github.io/hello.txt 라는 경로로 GET 요청을 한 뒤에

.then을 이용해 인삿말을 콘솔창에 출력해보았습니다. 

이번엔 그 직후 https://codingapple1.github.io/hello2.txt 라는 경로로 GET 요청을 또 하고

.then을 이용해 인삿말을 또 출력해보고 싶습니다. 

 

 

쉽게 말하면

1. hello.txt GET 요청

2. 그게 완료되면 hello2.txt GET 요청

3. 그게 완료되면 hello2.txt 결과를 콘솔창에 출력

을 하고 싶다는 말입니다. 

 

2번에서 만든 코드를 어떻게 업데이트하면 될까요?

힌트1) 프로미스.then(()=>{둘째실행할거}).then(()=>{셋째실행할거})

이렇게 then을 여러개 이어붙여 만들어봅시다.

힌트2) .then()은 당연히 new Promise()로 생성한 프로미스 오브젝트들에 붙일 수 있습니다. 

 

 

 

이것도 그냥 jQuery done이나 콜백함수를 쓰는게 더 깔끔할 수 있겠지만

연습삼아 then을 여러개 사용해서 단계적으로 코드를 실행시켜보도록 합시다. 

 

일단 이렇게 코드를 실행하고 싶다는 것입니다. 

 

 

then을 여러개 붙여서 뭔가 단계적으로 실행할 수 있습니다.

하지만 그냥 붙이면 안되고 then 함수는 new Promise()로 부터 생성된 오브젝트에만 붙일 수 있습니다. 

그럼 then을 붙일 수 있게 첫째 then에서 return new Promise() 이런걸 해주면 되지 않을까요?

return 해주면 그 자리에 new Promise()가 남아서 거기 뒤에 .then을 붙일 수 있으니까요. 

 

 

 

그래서 첫 then 안에 프로미스2를 만들고, 프로미스2는 두번째 ajax 요청을 해주고 성공판정을 내립니다.

그리고 프로미스2를 return 해주는 기능을 만들었습니다. 

그럼 이제 뒤에 then을 붙여서 코드를 연달아 실행이 가능하겠군요. 

 

 

흐름은 이렇습니다. 

1. 첫프로미스가 성공하면 then() 안의 코드를 실행시켜줍니다.

2. 근데 거기 안에는 프로미스2가 있습니다. 프로미스2가 성공하면

3. 뒤에 있는 then() 안의 코드를 실행시켜줍니다. 

 

 

 

그래서 이렇게 하시면 프로미스를 이용해 단계적으로 코드를 실행할 수 있습니다. 

 

 

 

 

 

출처 : 코딩애플의 매우쉽게 이해하는 JavaScript 객체지향 & ES6 신문법