axios学习-CSDN博客

本文链接：https://blog.csdn.net/E_TanChi/article/details/117734718

本文详细介绍了Axios库如何用于发起HTTP请求，包括GET、POST、PUT和DELETE等方法，并展示了如何通过不同方式传递参数，如URLSearchParams、JSON格式及使用全局配置和拦截器来优化请求处理。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

axios参数传递

get：查询
post：添加
put：修改
delete：删除

axios.get('/test').then(ret=>{
	console.log(ret.data)
})

如果想要带参数

axios.get('/test?id=3').then(ret=>{
	console.log(ret.data)
})

对象方式传参

axios.get('http://localhost:3000/test',{
	params:{
		id:123
	}
}).then(function(ret){
	//做接收数据后的操作
})

json格式传参数

axios.post('/test',{
	uname:'kkk',
	pwd:123
}).then(ret=>{
	//做接收数据后的操作
})

使用URLSearchParams传递参数

const params = new URLSearchParams();
params.append('name1','value1')
params.append('name2', 'value2')
axios.post('/test',params).then(ret=>{
	//做接收数据后的操作
	eg:console.log(ret.data)
})

PUT请求和POST类似

axios的响应结果

主要属性

data 实际相应回来的数据
headers 响应头信息
status 响应状态码
statusText 响应状态信息

 axios.post('/test').then(ret=>{
	响应结果都是ret的属性
	eg：ret.data
})

axios的全局配置

axios,default.timeout = 3000
axios.defaults.baseURL=’’
axios.defaults.headers[‘name’]=‘value’

axios拦截器

axios.interceptors.request.use(function(config){
	//在这里进行一些信息设置
	return config
}, function (err){
})

上面的是从页面向服务器发送信息时的拦截
如果想拦截从服务器到页面的信息，则如下

axios.interceptors.response.use(function(res){
	//这里对返回的数据进行处理
	return res
}, function(err){})