Promise 를 이용해서 API 받아오기
API 를 받아오는 Request 라는 함수를 생성했다. 아래 script 는 함수 전체 모습이다.
// ApiUtil.js 파일
const Request = (method, url, data) => {
let body = {
method: method,
headers: {
"Content-Type": "application/json"
}
};
if (data) {
body.body = JSON.stringify(data);
}
return fetch(url, body)
.then(res => res.json())
.then(res => {
if (res.status === 200) {
const result = res;
return Promise.resolve(result);
} else {
return Promise.reject(res.message);
}
});
};
export default Request;
}fetch함수 자체를 return 해줘야 Request함수를 사용할 때, Promise 를 받을 수 있다.
이 함수가 사용될때는 아래와 같이 사용된다.
_first = () => {
const innerFunc = async () => {
let a = await this._second();
return a;
};
innerFunc()
.then((res) => {
// console.log("then", res);
let memberInfo = res.data.content;
this.setState({ memberInfo: memberInfo });
})
.catch((res) => {
console.log('catch', res);
});
};
_second = () => {
return new Promise((resolve, reject) => {
this._loginInfo()
.then((res) => {
// console.log(res);
resolve(res);
})
.catch((res) => alert(res));
});
};
_loginInfo = async () => {
let data = {
memberId: this.state.memberId,
memberPw: this.state.memberPw,
registerTypeCd: 'email',
};
let result = await Request('post', url, data);
return Promise.resolve(result);
};설명
- 로그인 버튼을 클릭하게 되면
_first함수가 실행된다. _first함수 내부에는innerFunc가 선언되어 있고,innerFunc가 실행된다.innerFunc는 async 함수이므로_second함수를 기다린다.- 이제
_second함수가 실행된다. _second함수는_loginInfo함수를 실행한다._loginInfo함수는Request함수가 실행되기를 기다린다. 이제Request함수가 실행된다.- 드디어
Request함수가 실행하는데,fetch함수를 사용했으므로,JSON.stringify가 필요함. - API 결과를 확인해서
Promise.resolve(result)를 선언하여resolve시킨다. - 이제
resolve가 떨어졌으니 앞선 함수 선언들이 모두 resolve 상태로 쭉 이어나갈 것이다.
Promise 와 async/await 을 같이 공부하면서 테스트 해서 쓸데없는 선언이 많아졌다.
앞으로 API를 이용하면서 사용할 수 있는 예제가 될것 같다.
오랜만의 블로그 정리 끝.