axios & fetch 예시

get(상품 상세 조회)

axios

import axios from 'axios'
import { useState, useEffect } from "react";

function App() {
  const [data, setData] = useState();
  useEffect(() => {
    const getMsg = async () => {
      const res = await axios.get('https://mandarin.api.weniv.co.kr/product/detail/6396b06917ae666581c326db', 
        {
            headers: {
              "Authorization": "Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6IjYzOTY4ZjYwMTdhZTY2NjU4MWMzMjMyNiIsImV4cCI6MTY3NTk5NTc3MSwiaWF0IjoxNjcwODExNzcxfQ.bD2PQEEpzGKw9_-1fCXss79KsMIxzm_lmZQwIe7clZE",
              "Content-type": "application/json",
          },
            body: {},
        }
      )
      console.log(res.data);
      setData(res.data)
    }
    getMsg();
}, [])

  return (
    <>
			{data ? <h1>{data.product.itemName}</h1> : <h1>404</h1>}
    </>
  ) 
}

export default App;
JavaScript
복사

import axios from 'axios'
import { useState, useEffect } from "react";

function App() {
  const [data, setData] = useState();
  useEffect(() => {
    const getMsg = async () => {
      const res = await axios.get('https://mandarin.api.weniv.co.kr/product/detail/6396b06917ae666581c326db', 
        {
            headers: {
              "Authorization": window.localStorage.getItem("Authorization"),
              "Content-type": "application/json",
          },
            body: {},
        }
      )
      console.log(res.data);
      setData(res.data)
    }
    getMsg();
}, [])

  return (
    <>
			{data ? <h1>{data.product.itemName}</h1> : <h1>404</h1>}
    </>
  ) 
}

export default App;
JavaScript
복사
로컬스토리지에 토큰을 저장했을 경우

fetch

import axios from 'axios'
import { useState, useEffect } from "react";

function App() {
  const [data, setData] = useState();
  useEffect(() => {
    const getPost = async () => {
      const res = await fetch("https://mandarin.api.weniv.co.kr/product/detail/6396b06917ae666581c326db",{
        method: "GET",
        headers:{
            "Content-type" : "application/json",
            "Authorization" : "Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6IjYzOTY4ZjYwMTdhZTY2NjU4MWMzMjMyNiIsImV4cCI6MTY3NTk5NTc3MSwiaWF0IjoxNjcwODExNzcxfQ.bD2PQEEpzGKw9_-1fCXss79KsMIxzm_lmZQwIe7clZE"
        },
        // body:
      })
      const json = await res.json()
      setData(json)
    }
    getPost();
  }, [])
  console.log(data);
  return (
    <>
      {data ? <h1>{data.product.itemName}</h1> : <h1>404</h1>}
    </>
  ) 
}

export default App;
JavaScript
복사

POST(댓글 작성)

axios

import axios from 'axios'
import { useState, useEffect } from "react";

function App() {
  useEffect(() => {
    const makeComment = async () => {
      const res = await axios.post('https://mandarin.api.weniv.co.kr/post/6396adf617ae666581c32648/comments', 
      {
        "comment":{
          "content": "댓글 작성 !!! axios로 작성"
        }
      },
        {
            headers: {
              "Authorization": "Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6IjYzOTY4ZjYwMTdhZTY2NjU4MWMzMjMyNiIsImV4cCI6MTY3NTk5NTc3MSwiaWF0IjoxNjcwODExNzcxfQ.bD2PQEEpzGKw9_-1fCXss79KsMIxzm_lmZQwIe7clZE",
              "Content-type": "application/json",
            }
        }
      )
      console.log(res);
    }
    makeComment();
}, [])

  return (
    <>
    </>
  ) 
}

export default App;
JavaScript
복사

fetch

import axios from 'axios'
import { useState, useEffect } from "react";

function App() {
  useEffect(() => {
    const makeComment = async () => {
      const res = await fetch("https://mandarin.api.weniv.co.kr/post/6396adf617ae666581c32648/comments",{
        method: "POST",
        headers:{
            "Content-type" : "application/json",
            "Authorization" : "Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6IjYzOTY4ZjYwMTdhZTY2NjU4MWMzMjMyNiIsImV4cCI6MTY3NTk5NTc3MSwiaWF0IjoxNjcwODExNzcxfQ.bD2PQEEpzGKw9_-1fCXss79KsMIxzm_lmZQwIe7clZE"
        },
        body: JSON.stringify({
          "comment":{
            "content": "댓글 작성 !!! fetch로 작성"
          }
        })
      })
      console.log(res)
    }
    makeComment();
  }, [])
  return (
    <>
    </>
  ) 
}

export default App;
JavaScript
복사

•

body를 첫번째 인자, headers를 두 번째 인자로 해야 한다.