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)

1、get請求

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

2、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請求了，今天就講這么多，希望對大家有所幫助。