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请求了，今天就讲这么多，希望对大家有所帮助。

posted @ 2018-08-19 21:33  kylong  阅读(38733)  评论(1)  编辑  收藏  举报