axios中get請求與post請求的簡單函數封裝

今天寫點什麼呢，就寫寫如何將axios的post請求和get請求封裝在一個函數中。

首先講講axios的get請求。

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

get請求如何傳參想必你們應該都知道的

一是能夠拼接在url上

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

二是axios能夠以鍵值對的形式放入params對象中

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

axios的post請求

axios的post請求參數能夠直接在請求地址後加在一個對象中

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

今天講的如何將axios的post請求與get請求封裝在一塊兒利用的是axios(config)

一、get請求

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

二、post請求

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請求了，今天就講這麼多，但願對你們有所幫助。