axios的接口调用

1. axios的基本特性

axios（官网）是一个基于Promise用于浏览器和node.js的HTTP客户端。

它具有以下特征：

• 支持浏览器和node.js
• 支持promise
• 能拦截请求和响应
• 自动转换JSON数据

2. axios的基本用法

//引入axios.js
axios.get('/adata')
		.then(ret => {
		//data属性名称是固定的，用于获取后台响应的数据
		console.log(ret.data)
		})

3. axios的常用API

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

GET

通过传统url传递参数：

axios.get('/adata?id=123')
	.then(ret => {
	console.log(ret.data)
     })
     //req.query.id

通过Restful形式的url传递参数：

axios.get('/adata/123')
	.then(ret => {
	console.log(ret.data)
     })
     //req.params.id

通过params选项传递参数：

axios.get('/adata',{
		params:{
		id:123
		}
	})
	.then(ret => {
	console.log(ret.data)
     })
     //req.query.id

DELETE

参数传递方式与get类似。
通过url传递参数：

axios.delete('/adata?id=123')
	.then(ret => {
		console.log(ret.data)
     })
     //req.query.id

通过Restful形式的url传递参数：

axios.delete('/adata/123')
	.then(ret => {
		console.log(ret.data)
     })
     //:id
     //req.params.id

通过params选项传递参数：

axios.delete('/adata',{
		params:{
		id:123
		}
	})
	.then(ret => {
		console.log(ret.data)
     })
     //req.query.id

POST

通过选项传递参数（默认传递的是json格式的数据）

axios.post('/adata',{
		uname:'tom',
		pwd:123
	})
	.then(ret => {
		console.log(ret.data)
     })
     //req.body.uname + '---' + req.body.pwd

通过URLSearchParams传递参数（application/x-www-form-urlencoded）

	const params = new URLSearchParams();
	params.append('param1','value1');
	params.append('param2','value2');
	axios.post('/api/test',params).then(ret => {
		console.log(ret.data)
		//req.body.uname + '---' + req.body.pwd
})

PUT

参数传递方式与post类似,也是两种格式都支持，一般使用json格式。

axios.put('/adata/123',{
		uname:'tom',
		pwd:123
	})
	.then(ret => {
		console.log(ret.data)
     })
     //:id
     //req.body.uname + '---' + req.body.pwd + '---' + req.body.id 

4. axios的响应结果

影响结果的主要属性

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

app.get('/axios-json',(req,res) => {
	//res.send('axios get 传递参数' + req.query.id)
	res.json({
		uname:'lisi',
		age:12
	})
	//前端ret.data.uname
})

5. axios的全局配置

axios.defaults.timeout = 3000; //超时时间
axios.defaults.baseURL = ‘http://localhost:3000/app’ //配置请求的基准URL地址，请求路径就可以简化操作
axios.defaults.headers[‘mytoken’] = ‘aqwerwqwerwqer2ewrwe23eresdf23’ //配置请求头信息

6. axios拦截器

6.1 请求拦截器
在请求发出之前设置一些信息

//添加一个请求拦截器
axios.interceptors.request.use(function(config){
	//在请求发出之前进行一些信息设置
	config.headers.mytoken = 'hello';
	return config;
},function(err){
	//处理相应的错误信息
	console.log(err)
})

6.1 响应拦截器
在获取数据之前对数据做一些加工处理

//添加一个响应拦截器
axios.interceptors.response.use(function(res){
	//在这里对返回数据做处理
	var data = res.data;
	return data;
	//return res;
},function(err){
	//处理相应的错误信息
	console.log(err)
})