fetchModule을 만들어 보았다

const fetchModule = {

    async get(url) {
        const response = await fetch(url)
            .catch(error => {
                alert('관리자에게 문의주세요')
            })

        if (!response.ok){
            alert(await response.text())
            return
        }

        return await response.json()

    },

    async getAndParam(url, request) {
        const queryParam = this.query(request);
        const response = await fetch(url + '?' + queryParam)
            .catch(error => {
                alert('관리자에게 문의주세요')
            })

        if (!response.ok){
            alert(await response.text())
            return
        }

        return await response.json()

    },

    async post(url, request) {
        const response =  await fetch(url, {
                method: "POST",
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRF-TOKEN': document.querySelector('input[name="_csrf"]').value
                },
                body: JSON.stringify(request)
            }).catch(error => {
            alert('고객센터에 문의해주세요.')
        })

        if (!response.ok){
            alert(await response.text())
            return
        }

        return await response.json()
    },

    async put(url, request) {
        const response =  await fetch(url, {
            method: "PUT",
            headers: {
                'Content-Type': 'application/json',
                'X-CSRF-TOKEN': document.querySelector('input[name="_csrf"]').value
            },
            body: JSON.stringify(request)
        }).catch(error => {
            alert('고객센터에 문의해주세요.')
        })

        if (!response.ok){
            alert(await response.text())
            return
        }

        return await response.json()
    },

    async delete(url, request) {
        const response =  await fetch(url, {
            method: "DELETE",
            headers: {
                'Content-Type': 'application/json',
                'X-CSRF-TOKEN': document.querySelector('input[name="_csrf"]').value
            },
            body: JSON.stringify(request)
        }).catch(error => {
            alert('고객센터에 문의해주세요.')
        })

        if (!response.ok){
            alert(await response.text())
            return
        }

        return await response.json()
    },

    query(params) {
        return Object.keys(params)
            .map(k => encodeURIComponent(k) + '=' + encodeURIComponent(params[k]))
            .join('&');
    }
}

매번 해더값이나 method 값 넣어주기 귀찮아서 만들어 봤다 ㅎㅎ 팀원들이 잘 사용해주면 기분이 좋을것 같당

댓글을 작성해보세요.

  • 고승조
    고승조

    지금 다시 보니까 별로 좋지 않는 것 같아서 수정중이다.

    너무 간단하게 만든것같다.

    열심히 수정해야쥥

채널톡 아이콘