axios에서 get 요청과post 요청의 간단한 함수 봉인

오늘 뭘 쓸까요? axios의post 요청과 get 요청을 함수에 봉인하는 방법을 쓰세요.

우선 axios의 get 요청을 말씀드리겠습니다.

axios.get('/user')
    .then( (response) => {
        console.log(response);
    })
    .catch( (error) => {
        console.log(error);
    });

axios.get('/user?ID=12345')
.then( (response) => {
    console.log(response);
})
.catch( (error) => {
    console.log(error);
});

axios.get('/user', {
    params: {
        ID: 12345
    }
})
.then( (response) => {
    console.log(response);
})
.catch( (error) => {
    console.log(error);
});

axios의post 요청

axios.post('/user', {
    firstName: 'Fred',
    lastName: 'Flintstone'
})
.then( (response) => {
    console.log(response);
})
.catch( (error) => {
    console.log(error);
});

오늘 말한 axios의post 요청과 get 요청을 봉인하는 방법은 axios(config)입니다.

axios({
    methods: 'get',
    url: '/user',
    params: {
        ID: '1234'
    }
})
.then( (response) => {
    console.log(response);
})
.catch( (error) => {
    console.log(error);
});

axios({
    methods: 'post',
    url: '/user',
    data: {
        ID: '1234'
    }
})
.then( (response) => {
    console.log(response);
})
.catch( (error) => {
    console.log(error);
});

위의 비교에 의하면 get 요청과post 요청의 차이가 어디에 있는지 알 수 있을 것입니다. 그러면 우리는 차이점을 떼어내면 OK입니다.

import axios from 'axios';

export default function(url, method, params = {}) {
    //  get post 
    let data = method.toLocaleLowerCase() === 'get' ? 'params' : 'data';
    return axios({
        method,
        url,
        [data]: params //  data 
    }).then((res) => {
        return Promise.resolve(res.data);
    }).catch((err) => {
        return Promise.reject(err);
    })
}

위의 함수를 이용하여 우리는 이 함수를 이용하여 axios 요청을 쉽게 할 수 있습니다. 오늘 이렇게 많이 말씀드렸으니 여러분께 도움이 되었으면 합니다.