1) 구조
fetch 메서드는 서버와 통신을 할 수 있도록 하는 JavaScript입니다.
const url = 'controller로 요청보내는 경로 작성';
fetch(url)
.then ((response) => {
console.log('요청 및 반환 성공');
})
.then ((data) => {
console.log('이전 단계 성공');
})
.catch ((error) => {
console.log('하나라도 안되면 출력');
});
해당 구조가 fetch 메서드의 기본 구조입니다. url 을 통해서 GET 방식으로 요청을 진행합니다.
요청한 경로를 통해 결과물이 발생하게 된다면 response에 객체를 전달하게 됩니다.
그 다음 순서대로 .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("작업이 실패함");
});
개발 학습