[Javascript 세계의 동기 & 비동기]

자바스크립트는 동기적이고, blocking이며, single-threaded 환경에서 실행되는 언어이다. 우리는Javascript가 비동기식으로 동작하도록 조작할 수 있다.

방법1. 비동기적 Callback

데이터베이스 요청을 예로 들어보겠다. 비동기 Callback은 데이터베이스에 요청을 보내는 Callback 함수(또는 다른 중첩된 Callback 함수를 발생시킬 수 있도록 한다. 그 함수가 데이터베이스로부터 응답을 기다릴 동안, 남은 코드를 자유롭게 실행할 수 있다

• 단점

모든 종속 함수를 그 함수안에 중첩시켜야 한다. 결국 많은 중첩 함수가 생겨 코드가 복잡해지는 것이 바로 콜백 지옥이다.

→ 가독성도 안좋고, 디버깅하기가 상당히 어려워진다.

```

$.get('url', function (response) { parseValue(response, function (id) { auth(id, function (result) { display(result, function (text) { console.log(text); }); }); }); }); Colored by Color Scripter

```

방법2. Promise

동기적으로 보이는, 비동기 처리 방식이다.

콜백을 이용하지 않으며, 한 블록 내에 많은 중첩 함수를 쓰지 않고도 동기식으로 보이는 코드전개를 해 비동기 처리가 가능하게한다.

Promise를 사용하여 비동기 작업이 (성공 혹은 실패로) 완료된 후의 결과 값을 받을 수 있다. 결과 값을 돌려받을 수 있기 때문에 이후 처리를 컨트롤 할 수 있게 된다

const users = () => { getUsers() .then(users => { console.log(users); return users; }) .catch(error => { // TODO: error handling }); }

방법3. Async / Await

그냥 눈으로 봐도 한눈에 어떤 코드인지 알 수 있을 정도로 비동기이지만 동기방식 처럼 볼 수 있게 해 준다.

함수 앞에 async 키워드를 붙여야만 그 함수 안에서 await이란 키워드가 사용가능하다. return 값을 변수에 담아 .then 보다 조금 더 사용하기 쉽게 해 놓은 방법이다.

const users = async() => { console.log(await getUsers()); return await getUsers(); }

모든 async 함수는 promise를 반환하고, promise가 함수로부터 반환할 값을 resolve 한다.

 

fetch

const url ='<http://localhost3000/test`> const option ={ method:'POST', header:{ 'Accept':'application/json', 'Content-Type':'application/json';charset=UTP-8' }, body:JSON.stringify({ name:'sewon', age:20 }) fetch(url,options) .then(response => console.log(response)) fetch("<http://localhost3000/test>") .then(response => console.log("response:", response)) .catch(error => console.log("error:", error)); // 메서드의 디폴드 값은 GET이기 때문에 아무런 정보를 적지 않으면 GET으로 적용된다.

promise기반의 fetch를 사용하다보니 조금 불편한점이 생김

1. 지원하지 않는 브라우져 혹은 브라우져 버전이 있다.
2. 서버로의 요청을 취소해야하는 경우도 생깁니다. 예를들면 상품등록 버튼에 비동기 통신을 연결해놨는데 더블클릭을 하는 바람에 두번 요청이되면 앞선 요청을 취소해야하는 경우가 생긴다. 그런 http 요청에 대한 취소기능도 axios에서 제공하고 있다.

axios

프로미스의 동기식 문법을 사용할수 있고, 브라우져 호환에 강력한 장점이 있으며, 서버에서 전달된 json data를 동적으로 변환할수 있는 강력함과, 요청과 응답에 대한 취소요청을 할수잇는 기능들이 제공된다.

const option ={ url ='<http://localhost3000/test`> method:'POST', header:{ 'Accept':'application/json', 'Content-Type':'application/json';charset=UTP-8' }, data:{ name:'sewon', age:20 } axios(options) .then(response => console.log(response)) import axios from 'axios'; axios.get('<http://localhost3000/test>') .then((Response)=>{console.log(Response.data)}) .catch((Error)=>{console.log(Error)}