21.11.24 async await과 useEffect, axios.post , state, React 사용해서 API 받아오고 posting 하기 오류 수정
2021. 11. 25. 02:00ㆍ작업/JavaScript
export default function ResultGraph() {
const [firstResponse, setFirstResponse] = useState("");
const context = useContext(UserContext);
//CORS : Cross Origin Resource Sharing 교차 출처 리소 스 공유
// 도메인과 포트가 서로 다른 서버로 client를 요청했을 때 브라우저가 보안상 이유로 API를 차단하는 문제. ex client는 8080포트, server는 9000포트일 때.
//나는 지금 백엔드 없이 프론트React만 사용하므로 요청받는 server에서 모든 요청을 허가한다든지 백엔드에 cors 패키지를 설치해 미들웨어로 처리한다든지 할 수 없다.
useEffect(() => {
async function asyncCall() {
let seqKey = "";
const uploadData = await axios
.post(
`http://www.career.go.kr/inspct/openapi/test/report?apikey=${context.apikey}&qestrnSeq=${context.qestrnSeq}`,
context
)
.then((res) => {
// console.log(res);
setFirstResponse(res.data.RESULT.url);
seqKey = res.data.RESULT.url.split("seq=")[1];
console.log(seqKey);
return seqKey;
})
.catch((err) => {
console.error(err);
});
const reloadData = await axios
.get(`https://www.career.go.kr/inspct/api/psycho/report?seq=${seqKey}`)
.then((res) => {
console.log(res);
})
.catch((err) => {
console.error(err);
});
}
asyncCall();
}, []);
//https://www.career.go.kr/inspct/web/psycho/value/report?seq=NTU3MTA5NDE
useEffect(() => {
//firstResponse
console.log(context);
console.log(firstResponse);
}, [firstResponse]);
'작업 > JavaScript' 카테고리의 다른 글
21.11.24 자바스크립트 promise / resolve,reject / .then , .catch / try {} catch {} / async , await / useEffect + async + await (0) | 2021.11.24 |
---|---|
21.11.22 JSON 객체와 JS Object의 차이 공부 및 리엑트 객체 state 중복 원소 포함하지 않게 동적 값 넣기 (0) | 2021.11.22 |
21.10.15 async await (0) | 2021.10.15 |
21.10.15 Promise (0) | 2021.10.15 |
21.10.15 동기vs비동기 예제 / Callback Hell 체험 (0) | 2021.10.15 |