리액트 Fetch API 와 axios 를 통해 서버와 통신하기

 

 

Fetch API 와 axios 를 통해 서버와 통신하기

참고사이트

 

fetch

  const loadContent= () =>{
      const url = 'api/todolist'
      const options={
          method:"GET"
      }
      fetch(url,options)
      .then((resp)=>{
        return resp.json()
      })
      .then( data => {
          console.log(JSON.stringify(data))
          setListContent(data)
      })
 }

 

axios

• 구형브라우저 지원
• 요청 중단 가능
• 응답 시간 초과 설정 가능
• CSRF 보호 기능 내장
• JSON 데이터 자동변환
• Node.js 에서 사용

npm install axios

    // api/todoinsert : 서버 url
    const handleSubmit=(event)=>{
        event.preventDefault(); //포커스 기능 방지

        let data={
            //json
            subject:inputs.subject,
            name:inputs.name,
            summary:inputs.summary
        }
        console.log(data)

        axios.post('/api/todoinsert',
                    JSON.stringify(data),{
                    headers: {
                        "Content-Type": `application/json`,
                    },
                }).then((response)=>{
                    console.log(response)
                    alert('등록완료')
                })
    }

 

 

Axios를 사용하여 HTTP요청하기