Promise (then, catch)

 

<script>
	console.log(1);
	console.log(2);
	setTimeout(function(){console.log(3)}, 5000);
	console.log(4);
</script>

// 1, 2, 4, 3(5초 뒤)

Synchronous(동기적) vs Asynchronous(비동기적)

Synchronous(동기적): 순차적으로 코드 실행 -> 어떻게 실행될 것인지 파악하기 쉽다

Asynchronous(비동기적): 각자가 자신의 시간표에 따라서 동작 -> 멀티태스킹하는거라 혼란스럽지만, 빠른 속도가 가능함

 

fetch API

https://developer.mozilla.org/ko/docs/Web/API/Fetch_API/Using_Fetch

<script>
	console.log(1);
    fetch('https://jsonplaceholder.typicode.com/posts')
      .then((response) => response.json())
      .then((myJson) => console.log(JSON.strigify(myJson));
      console.log(2);
  </script>

예제 데이터 참고 사이트

https://jsonplaceholder.typicode.com/

/posts 링크

 

<script>
	var fetched = fetch('https://jsonplaceholder.typicode.com/posts');
    console.log('fetched',fetched);
    fetched.then(function(result){
    	console.log('result', result);
    });  // 성공했을 때 호출
    fetched.catch(function(reason){
    	console.log('reason', reason);
    }); // 실패했을 때 호출
 </script>
    
 <script>
    // 더 간략하게
    fetch('https://jsonplaceholder.typicode.com/posts')
    	.then(function(result){
    		console.log('result', result);
      	});  // 성공했을 때 호출
    	.catch(function(reason){
        	console.log('reason', reason);
        }); // 실패했을 때 호출
</script>

함수를 사용하는데 함수의 return값이 promise면, 함수는 비동기적으로 동작할 가능성이 높다

그 함수가 return 한 값은 두개의 함수를 사용할 수 있다

 

Promise를 사용하는 이유

- 비동기적인 작업을 실행할 때, 그 작업이 성공했는지 실패했는지 표준화된 방식을 이용해 처리해준다

- 성공했을 때는 then으로 전달된 함수 실행, 실패했을 땐 catch로 전달된 함수를 실행한다.

 

자바스크립트 데이터 타입을 바꿀 수 있다면?

 <script>
    fetch('https://jsonplaceholder.typicode.com/posts')
    	.then(function(response){
            // response.json().then(function(data){
            // 	console.log('data', data);
            // });		// Nested promise
            return respose.json();
      	});
    	.catch(function(reason){
        	console.log('reason', reason);
        });
        .then(function(data){
        	console.log('data', data);
        });		// Promise chaining(더 많이 사용함)
</script>

 

 

 

 

<출처>

https://velog.io/@dorazi/Asynchronous-VS-Synchronous

https://velog.io/@syj9760/JSAsynchronous-%EB%B9%84%EB%8F%99%EA%B8%B0-%EC%8B%A4%ED%96%89-callback-promise-async%EC%9D%98-%EC%82%AC%EC%9A%A9%EB%B2%95

https://developer.mozilla.org/ko/docs/Web/API/Fetch_API/Using_Fetch

https://velog.io/@hayyim0626/TIL-Promise