비동기 통신

1. 동기적 처리와 비동기적 처리

동기(Suncronous) : 요청을 보낸 후, 해당 요청의 응답을 받아야 다음 동작을 실행 ( 코드 한 줄 실행 완료 후 다음 줄 실행)
비동기( Asynchronous) : 요청 후 응답과 관계없이 다음 동작을 실행

자바스크립트는 동기적 처리가 기본. 비동기 처리를 지원하는 일부 기능이 있다.

주요 비동기적 처리

Rest API 요청
파일/ 데이터베이스 처리
타이머, 암호화/복호화 등

console.log("안녕하세요.");
setTimeout(()=>{
	console.log("김은하입니다.");	
},3000)

console.log("개발자입니다.");

// 안녕하세요.
// 개발자입니다.
// 김은하입니다.

비동기 처리의 문제점

결과 값이 없는데 다음 코드가 실행되면 전체 코드 실행에 문제가 될 수 있다.

⇒ 해결법! 콜백 함수

function func1(callback){
	setTimeout(()=>{
	console.log("김은하입니다.");
	callback()	
},3000)
}

function func2() {
	console.log("안녕하세요");
}

func1(func2)

//3초 후 김은하입니다. 안녕하세요.

자바스크립트에서 함수는 first-class function

함수 자체를 변수에 저장 가능하다.
함수의 인자에 다른 함수를 인수로 전달 가능하다.
함수의 반환 값으로 함수를 전달 가능하다.

콜백의 문제점

콜백 지옥이 만들어 질 수 있다.

⇒ Promise, async/await 으로 해결할 수 있다.

fetch는 api의 종류이다. axois는 라이브러리이다.

2. Promise

ES6 에서 공식적으로 추가된 문법.

const runCode = new Promise(
	(resolve, reject) => {
	setTimeout(() => {
	let num = 10; 
	if (num > 9) {
		resolve(num);
}else {
		reject("err!")
}

},1000);
)

runCode.then((item)=> {
	console.log('success', item)
}, (err)=> {
	console.log(err)
}

결국 비동기로 동작하는게 뭔지 알아야 하는 이유는

비동기로 동작함으로서 생길 수 있는 상황을 동기적으로 해결하고자 하기 때문이고

그 방법이 콜백, promise, async/await 인 것이다.

(새로 알게된 지점)

2-1. Promise 메서드

catch 메서드

failureCallback 함수가 없을 경우 예외 상황에서 발생하는 메서드

3. async/await

ES8에서 도입된 것으로 제너레이터보다 간단하고 가독성 좋게 비동기처리를 동기처럼 동작하도록 구현한 것이다.

const fetch = require('node-fetch');

async function fetchTodo(){
	const url = '~'
	const response = await fetch(url);
	const todo = await response.json();
	console.log(todo);
}

fetchTodo();

await 키워드는 async 함수 안에서만 사용할 수 있다. async함수는 async 키워드를 사용해서 정의하고 언제나 Promise를 반환한다. 명시적으로 프로미스를 반환하지 않아도 암묵적으로 반환값을 resolve하는 프로미스를 반환한다.

mayoDev