JS Fetch 사용법

JS Fetch 에서 method: POST, GET, DELETE 사용법을 알아보자

 

POST

post는 무언가 내가 작성한 글, 이미지, url등을 저장할때 사용한다.

 

가장 먼저 function 함수명()을 작성한 다음 내가 보내주고 싶은 데이터를 변수에 넣어준다.

const contentData = {
        // 내가 post로 보내주고 싶은 data의 .value
        content: document.getElementById('guestBookData').value,
    }

다음으로는 fetch와 url을 넣어준다.

// 내가 사용한 코드의 틀
const response = await fetch(`"URL 백엔드에서 작성한 주소를 넣어준다"`, {
    headers: {
        Authorization: '',
        Accept: ''
    },
    withCredentials: true,
    method: 'POST',
    body: JSON.stringify(contentData)
}
)

// 채워 놓은 코드
const response = await fetch(`"URL 백엔드에서 작성한 주소를 넣어준다"`, {
        headers: {
            // 이번 프로젝트의 경우 pyload의 access에 토큰이 저장되므로 로그인한 유저의 토큰을 Authorization을 통해 가져온다.
            Authorization: 'Bearer ' + localStorage.getItem('access'),
            // post 형식으로 보내줄 경우에는 데이터를 json화 해 주어야 한다.
            Accept: "application/json",
            'Content-type': 'application/json'
        },
        withCredentials: true,
        // 어떤 method 인지 지정해 준다. 디폴트 값은 GET mothod이다.
        method: 'POST',
        // body에 contentData의 data를 json 형식으로 데이터를 보내준다.
        body: JSON.stringify(contentData)
    }
    )

마지막

// 모든 데이터를 헤더 바디에 담아준 다음 json()한 다음 response_json에 넣어준다
response_json = await response.json()

	// 결과를 alert를 통해 확인할 수 있다.
    if (response.status == 200) {
        alert('정상')
    } else {
        alert('비정상')
    }
}

 

전체 코드

async function 함수명() {
    const contentData = {
        // 내가 post로 보내주고 싶은 data의 .value
        content: document.getElementById('guestBookData').value,
    }
    const response = await fetch(`"URL 백엔드에서 작성한 주소를 넣어준다"`, {
        headers: {
            // 이번 프로젝트의 경우 pyload의 access에 토큰이 저장되므로 로그인한 유저의 토큰을 Authorization을 통해 가져온다.
            Authorization: 'Bearer ' + localStorage.getItem('access'),
            // post 형식으로 보내줄 경우에는 데이터를 json화 해 주어야 한다.
            Accept: "application/json",
            'Content-type': 'application/json'
        },
        withCredentials: true,
        // 어떤 method 인지 지정해 준다. 디폴트 값은 GET mothod이다.
        method: 'POST',
        // body에 contentData의 data를 json 형식으로 데이터를 보내준다.
        body: JSON.stringify(contentData)
    }
    )
    response_json = await response.json()

    if (response.status == 200) {
        alert('정상')
    } else {
        alert('비정상')
    }
}

 

 

GET

get은 무언가 내가 작성한 글, 이미지, url등을 조회할때 사용한다.

post 방식에서의 feach 사용법과 중복된 내용이 많아서 이미 설명한 점을 제외하도록 하겠다.

async function show_guest_book() {
    const response = await fetch(`"URL 백엔드에서 작성한 주소를 넣어준다"`, {
        method: 'GET',
        // get은 조회만 하면 되기 때문에 post를 할때처럼 여러 데이터를 헤더와 바디에 보내지 않는다.
        headers: {
        	// 플젝에서 simple jwt를 사용해서 user 정보가 localStorage의 access에 있기 때문에 그 정보를 가져와야 한다.
            Authorization: 'Bearer ' + localStorage.getItem('access'), // 'Bearer ' 꼭 꼭 엔터 쳐줘야 한다.
        },
    })
        .then(response => response.json())
        // data 안에 html을 작성해서 보여주고 싶으 데이터를 html 안에 보여줄 수 있다.
        // 물론 그냥 html을 작성하면 안 나온다.
        .then(data => {
            // JSON.parse() 데이터를 실제 json화 시켜준다.
            // payloda에 있는 user_id 가져오려고 작성한것일 뿐 get 조회를 위한 코드는 아니다.
            const login_user = JSON.parse(localStorage.getItem("payload")).user_id
            }
        )
}

 

 

DELETE

delete는 무언가 내가 작성한 글, 이미지, url등을 삭제 할때 사용한다.

그냥 백엔드에서 만든 url만 method 'delete'로 보내주면 된다.

async function delete_guest() {
    const response = await fetch(`"URL 백엔드에서 작성한 주소를 넣어준다"`, {

        method: 'DELETE',
        headers: {
            Authorization: 'Bearer ' + localStorage.getItem('access'),
        },
    })
    response_json = await response.json()

    if (response.status == 200) {
        alert('삭제 되었습니다.')
    } else {
        alert('삭제 안됨.')
    }
}