使用axios发送get、post请求

最新推荐文章于 2024-10-09 19:22:21 发布

原创最新推荐文章于 2024-10-09 19:22:21 发布 · 945 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #vue.js #html5 #html #es6

学习笔记专栏收录该内容

29 篇文章

订阅专栏

本文介绍了如何使用axios库进行GET和POST请求。包括两种不同的请求方式，并详细讲解了axios的相关配置选项，适用于JavaScript和Vue.js项目开发。

get请求

方式一

axios.get('/login?userId=111')
  .then(res=>{
	console.log(res);
}).catch(error=>{
	console.log(error);
})

方式二，通过params传

axios.get('/login',{
	params:{
		userId: 111
	}
})
  .then(res=>{
	console.log(res);
}).catch(error=>{
	console.log(error);
})

post请求

方式一

axios.post('/login',{
	userId: 111,
	userName: 'aa'
})
  .then(res=>{
	console.log(res);
}).catch(error=>{
	console.log(error);
})

方式二

axios({
	method:'post',
	url:'/login',
	data: {
		userId: 111,
		userName: 'aa'
	}
})

axios的相关配置

{
	url: '/login',  //必需
	method: 'post',  //请求的方式，默认是get
	baseURL: 'http://www.example.com',  //基地址
	headers: {'Authorization':'Bearer token'},  //设置请求头
	params: {userId: 111},  //要传的数据(GET请求)
	data: { userId: 111},  //要传的数据(PUT, POST, PATCH请求)
	timeout: 1000,  //指定超时的毫秒数
	
	//发送请求前，修改请求数据，适用于PUT,POST,PATCH
	transformRequest: [ function (data) {
		return data;
	}],
	//传递给then/catch前，修改响应数据，如可以做大数字的处理
	transformResponse: [ function (data) {
		//处理data
		return data;
	}]