자바스크립트/비동기 (7) 썸네일형 리스트형 promise를 동기적인 모양으로 처리하는 async와 await promise를 처음 접하면 다소 복잡해서 이해하기 쉽지 않다. 비동기라는 개념이 낯설기 때문이다. 그러나 promise의 raw한 문법 대신 async와 await를 쓰면 일반적인 동기 코드를 쓴 것처럼 표현할 수 있다. async getData() { // await을 쓰려면 async 키워드를 쓴 함수로 감싸줘야 한다. const result = await fetch(/* ... */); // promise가 resolve될 때가지 await 했다가 promise가 담고 있는 결과 값을 result에 준다. console.log(result); } 동기적인 함수처럼 보이지만 내부적으로는 promise를 쓰는 것과 똑같이 돌아간다. 때문에 await를 쓴다고 쓰레드가 멈춰 있는 게 아니고 요청을 날린.. Promise.all 둘 이상의 비동기 작업을 기다린 뒤 처리해야할 경우 Promise.all을 쓴다. const p1 = new Promise((resolve, reject) => { /* ... */ resolve(1); }); const p2 = new Promise((resolve, reject) => { /* ... */ resolve(2); }); Promise.all([p1, p2]); // p1과 p2가 resolve 될 때 resolve된 promise를 리턴한다. .then(result => console.log(result)) .catch(error => console.log(error)); // 둘 중 하나라도 reject 되면 catch로 빠진다. axios로 서버에 요청할 때 생기는 에러 처리 방법 axios.get은 프로미스를 리턴하고 await를 앞에 붙여주면일반적인 프로미스에서 .then을 한 것과 같이 요청이 끝날 때까지 기다렸다가 결과 값을 리턴한다. 만약 try 문 안의 서버 요청 과정에서 상태 코드가 200이 아닌 에러가 발생했을 경우 catch로 넘어가게 되는데catch가 받는 ex 객체에는 request와 response가 있고이를 이용해서 어떤 경우의 오류인지를 파악해각 오류에 대한 대처를 할 수 있다. try { const response = await axios.get("https://jsonplaceholder.typicodef.com/posts");} catch (ex) { // ex.request 서버에 성공적으로 요청했을 때 설정됨 // ex.response 서버에 성공.. 자바스크립트의 try, catch try { } catch(err) { console.log(error); } try 안에서 오류가 발생하면 각 오류에 해당하는 객체가 생성되고 곧바로 catch로 넘어가 인자로 error 객체를 조회할 수 있게 된다. 다음과 같은 오류 객체가 생성된 것과 같다. let error = new Error(message); let error = new SyntaxError(message); let error = new ReferenceError(message); let error = new TypeError(message); error.name에는 생성자과 이름과 동일한 값이 들어 있고 (Error, SyntaxError) error.message에는 생성자에 넣은 인자 값이 들어 있다. let error =.. async 함수와 await에 관한 팁 1. 함수 앞에 async를 붙이면 무조건 Promise를 리턴한다. 일반적인 값을 리턴하려해도 자동으로 Promise가 이를 감싼 뒤에 리턴한다. async function func() { return 1; } 2. async 함수 안에서 Promise.all을 쓰려면 다음과 같이 한다. let results = await Promise.all([ fetch(url1), fetch(url2), ... ]); Promise.all을 쓰면 각 배열에서 리턴하는 Promise를 기다린 다음에 진행한다. 자세한 내용은 다음 링크에 아주 잘 설명 돼 있다. https://javascript.info/async-await Promise 이해하기 function getData(data) { return new Promise((resolve, reject) => { // 새로 생성된 Promise는 pending(대기) 상태가 된다. // .. resolve(data); // 여러 작업이 이뤄진 후 resolve나 reject를 만나면 각각 fulfilled(성공)이나 rejected(실패) 상태가 된다. }); } getData(1) // resolve나 reject로 settled 상태가 되면 then으로 넘어간다. // data로 resolve된 데이터를 받을 수 있다. .then(data => { // then에서 새로운 Promise를 자동을 생성하게 되고 return 값이 곧 위의 resolve와 같다. return data; }) //.. fetch를 이용해 서버의 데이터를 가져오는 방법 const server = 'https://koreanjson.com/posts/1'; fetch(server) .then(response => response.json()) .then(json => console.log(json)) .catch(error => console.log(error)); // 각 메소드는 Promise 객체를 리턴한다. // 1줄에서 가져온 것을 // 2줄에서 받아 json 형태로 바꾸고 // 3줄에서 json을 콘솔에 보여준다. // error가 발생하면 콘솔에 error를 표시한다. 참고 : https://koreanjson.com/ 이전 1 다음
