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]);