우리가 흔히 배우는 내용 by notion ai
JavaScript는 단일 스레드 언어로, 한 번에 하나의 작업만 처리할 수 있습니다. 그러나 JavaScript는 비동기 처리를 위해 콜백 함수, 프로미스 및 async/await 함수를 제공하여, 작업이 완료될 때까지 기다리지 않고 다른 작업을 수행할 수 있습니다.
콜백 함수는 비동기 함수의 결과를 처리하는 데 사용됩니다. 콜백 함수는 비동기 함수의 결과가 준비되면 호출됩니다. 이 방법은 간단하지만, 중첩된 콜백 함수로 인해 코드가 복잡해질 수 있습니다.
프로미스는 콜백 지옥을 방지하기 위해 도입된 개념입니다. 프로미스는 비동기 작업의 성공 또는 실패를 나타내는 객체입니다. 성공한 경우 결과를 반환하고, 실패한 경우 에러를 반환합니다. 프로미스는 then() 및 catch() 메서드를 사용하여 결과를 처리합니다.
async/await 함수는 JavaScript의 최신 기능 중 하나입니다. async 함수는 항상 프로미스를 반환하며, await 키워드를 사용하여 비동기 작업의 완료를 기다립니다. 이 기능은 코드를 더 읽기 쉽고 이해하기 쉽게 만들어 줍니다.
다음과 같은 예제를 통해 async/await 함수의 동작 원리를 살펴볼 수 있습니다.
async function getData() { const response = await fetch('<https://jsonplaceholder.typicode.com/todos/1>'); const data = await response.json(); return data; } getData().then(data => console.log(data));
위 코드에서, getData() 함수는 비동기로 실행됩니다. fetch() 함수는 네트워크 요청을 수행하고, 결과를 Promise 객체로 반환합니다. await 키워드를 사용하여 프로미스가 처리될 때까지 기다린 후, response.json() 메서드를 사용하여 JSON 데이터를 추출합니다. 이후, 추출된 데이터를 반환합니다.
getData() 함수를 호출한 후, then() 메서드를 사용하여 반환된 데이터를 처리합니다.
이와 같이 async/await 함수를 사용하면 JavaScript 코드를 더욱 간결하고 가독성 있게 만들 수 있습니다.
결국 async await도 promise를 반환한다!
promise.. 어떤 원리지?
- 프로미스는 자바스크립트 비동기 처리에 사용되는 객체입니다.
- 프로미스는 3가지의 상태로 처리합니다.
new Promise()로 프로미스를 생성하고 종료될 때까지 3가지 상태를 갖습니다. - Promise는 최초로 생성되었을 시점에는 ‘pending’ 상태이다.
- 만약 Promise가 v라는 값으로 resolved 되었다면 Promise는 ‘fulfilled’ 상태가 되고 v를 fulfillment value라고 부른다.
- 만약 Promise가 e라는 에러로 rejected 되었다면, Promise는 ‘rejected’ 상태가 되고 e를 rejection value가 된다.
- Promise가 ‘fulfilled’나 ‘rejected’ 상태가 되었다면 우리는 해당 Promise를 settled 되었다고 말할 수 있다.
결국 pending, fulfilled, rejected로 비동기 처리 과정을 관리하는군.
어떻게 이런 게 가능할까?
비동기 처리 라이브러리도 이런 느낌이긴 하네.
swr의 axios로 데이터 가져오는 방법은 다음과 같다.
import axios from 'axios' const fetcher = url => axios.get(url).then(res => res.data) function App () { const { data, error } = useSWR('/api/data', fetcher) // ... }
결국 then을 사용하고 이는 promise처럼 data가 있다면 해당 data를 반환하고, catch할 에러가 생기면 error에 데이터를 담는 게 아닐까 싶다.
추가) fetch는 ESMC5에서 XMLHttpRequest로 동작함.