1) 구조
fetch 메서드는 서버와 통신을 할 수 있도록 하는 JavaScript입니다.
const url = 'controller로 요청보내는 경로 작성';
fetch(url)
.then ((response) => {
console.log('요청 및 반환 성공');
})
.then ((data) => {
console.log('이전 단계 성공');
})
.catch ((error) => {
console.log('하나라도 안되면 출력');
});
해당 구조가 fetch 메서드의 기본 구조입니다. url 을 통해서 GET 방식으로 요청을 진행합니다.
요청한 경로를 통해 결과물이 발생하게 된다면 response에 객체를 전달하게 됩니다.
여기서 보통은 json으로 서버에서 데이터가 전달되며 해당 데이터를
return response.json() 형태로 처리합니다.
이때 오류가 발생하게 되면 html형태의 오류페이지가 전달되는데 이를 json으로 파싱하지 못해 오류가 발생하기도 합니다. 따라서 catch로 오류처리를 해주시면 디버깅 및 오류 처리를 쉽게 할 수 있습니다.
또한 json말고 return response.text()형태로 처리하기도 하는데 text형태로 처리를 하게되면 위의 오류 상황에서 오류가 발생하지는 않지만 오류페이지가 text 형태로 전달되어 외부에 노출 될 수 있습니다.
그 다음 순서대로 .then의 data로 데이터를 전달하게 됩니다. (이는 이전 단계의 로직 처리에 성공했다는 의미입니다.)
catch에는 보통 error 상황을 처리하게 됩니다. (저는 보통 'alert'를 통한 안내 메시지를 띄워드립니다.)
2) Promise 객체
해당 메서드의 결과로 반환되는 것이 Promise객체 입니다.Promise 객체는 다음과 같은 상태가 있습니다.
- Pending(대기) : 객체가 생성되고 아직 비동기 작업이 완료되지 않은 초기상태
- Fulfilled(이행) : 객체 생성이 성공적으로 완료되어 처리된 경우
- Rejected(실패) : 비동기 작업이 실패하여 콜백 된 경우
2-1) Pending
let myPromise = new Promise((resolve, reject) => {
// 비동기 통신 로직을 삽입
});2-2) Fulfilled
let myPromise = new Promise((resolve, reject) => {
// 비동기 작업 성공 시
resolve("작업이 성공적으로 완료됨");
});2-3) Rejected
let myPromise = new Promise((resolve, reject) => {
// 비동기 작업 실패 시
reject("작업이 실패함");
});
개발 학습