Svelte Get, Post

fetch를 사용하여 get 하는 방법 기본 틀

<script>
  let message;
  let check=[];
  const options2 = {
    method: "GET",
    headers: { "Content-Type": "application/json" },
  };
  fetch("http://localhost:8080/api/selectAll", options2)
    //링크는 데이터를 반환하는 API 링크
    .then((response) => (message = response.json()))
    .then(
      (funcData) => {
        message = funcData;
        check = message;
        //console.log(check);
      },
      (rejected) => {
        // 접근이 거절당했을 때 수행할 작업
        message = "rejected....";
      }
    )
    .catch((e) => {
      // 에러가 나면 수행할 작업
      message = "error occurred";
    });
</script>

{#each check as c}
  <p>{c.title} {c.content} {c.author}</p>
{/each}

 

위를 응용하여 js 파일로 만들어 두어 모듈화 하였다.

getAPI.js

/**
 * @param {RequestInfo | URL} url
 */
async function getAPI(url){
  const res=await fetch(url,{
    method: 'GET',
  });
  let resData=res.json();
  if(res.ok){
    return resData;
  }else{
    throw new Error("error");
  }
}
export {getAPI}

 

get method를 사용하려는 svelte 파일에서 getAPI.js를 import 한 후 다음과 같이 작성하면 json으로 불러온다.

 

첫 페이지 로딩시 실행하려면 onMount 안에서 getAPI가 작동해야 한다.

또한 await을 하여야 Promise가 제대로 된다.

까먹고 await을 하지 않아 제대로 읽을 수 없는 경우가 많았다.

onMount(async()=>{
	const url = "api주소"
	let resData = await getAPI(url);
});

 

postAPI.js

/**
 * @param {RequestInfo | URL} url
 * @param {any} jsonStr
 */
async function postAPI(url,jsonStr){
    const res= await fetch(url,{
        method: 'POST',
        headers: {
          'content-type': 'application/json'
        },
            body: jsonStr,      
    });
    return res;  
} 
export {postAPI}

 

post도 get과 비슷한 방식으로 진행한다.

onMount(async()=>{
    let jsonStr = JSON.stringify({a:a,b:b});
    const url = 'api주소';
    const res = await postAPI(url,jsonStr);
    let resData = await res.json();
});