axios&ajax

axios

axios是基于promise对ajax的一种封装
ajax mvc
axios mvvm

一、axios的基本使用

axios发送get请求。

// 使用默认方式发送无参请求
<script src="http://unpkg.com/axios/dist/axios.imin.js"></script>
<script>
	axios({
		url:'http://caofuqiang.com:8080/student/getAllStudent',
	}).then(res=>{
		console.log(res);
	})
</script>

// 指定请求方式为get的无参请求
<script src="http://unpkg.com/axios/dist/axios.imin.js"></script>
<script>
	axios({
		url:'http://caofuqiang.com:8080/student/getAllStudent',
		method:'get'
	}).then(res=>{
		console.log(res);
	})
</script>

// axios发送get方式的有参请求
<script src="http://unpkg.com/axios/dist/axios.imin.js"></script>
<script>
	axios({
		url:'http://caofuqiang.com:8080/student/findStudentById?id=1',
	}).then(res=>{
		console.log(res);
	})
</script>

// axios发送get方式请求其他形式
<script src="http://unpkg.com/axios/dist/axios.imin.js"></script>
<script>
	axios({
		url:'http://caofuqiang.com:8080/student/findStudentById',
		params:{
			id:'1'
		}
	}).then(res=>{
		console.log(res);
	})
</script>

axios发送post请求。

// 使用post方式发送无参请求
<script src="http://unpkg.com/axios/dist/axios.imin.js"></script>
<script>
	axios({
		url:'http://caofuqiang.com:8080/student/pGet',
		method:'post'
	}).then(res=>{
		console.log(res);
	})
</script>

// 使用post方式发送有参请求
<script src="http://unpkg.com/axios/dist/axios.imin.js"></script>
<script>
	axios({
		url:'http://caofuqiang.com:8080/student/findStudentByName',
		method:'post',
		params:{
			name:'张三'
		}
	}).then(res=>{
		console.log(res);
	})
</script>

使用axios发送带有参数的post请求，使用data传递，后台控制器接收到的name null axios使用post携带参数请求默认使用application/json

1. 解决方式一：params属性进行数据的传递
2. 解决方式二：“name=张三”
3. 解决方式三：服务器给接收的参数加上@requestBody

二、axios请求方式

// 使用axios.get方式发送无参请求
<script src="http://unpkg.com/axios/dist/axios.imin.js"></script>
<script>
	axios.get('http://caofuqiang.com:8080/student/getAllStudent').then(res=>{
		console.log(res);
	}).catch(err=>{
		console.log(err);
	})
</script>

// 使用axios.get方式发送有参请求
<script src="http://unpkg.com/axios/dist/axios.imin.js"></script>
<script>
	axios.get('http://caofuqiang.com:8080/student/findStudentById',{params:{id:1}}).then(res=>{
		console.log(res);
	}).catch(err=>{
		console.log(err);
	})
</script>

// 使用axios.post方式发送无参请求
<script src="http://unpkg.com/axios/dist/axios.imin.js"></script>
<script>
	axios.post('http://caofuqiang.com:8080/student/pGet').then(res=>{
		console.log(res);
	}).catch(err=>{
		console.log(err);
	})
</script>

// 使用axios.post发送有参请求
<script src="http://unpkg.com/axios/dist/axios.imin.js"></script>
<script>
	axios.post('http://caofuqiang.com:8080/student/findStudentByName',"name=张三&age=10").then(res=>{
		console.log(res);
	}).catch(err=>{
		console.log(err);
	})
</script>
// 发送post请求携带参数 直接使用"name=张三&age=10"
//使用data传递数据 后台需要将axios自动转换为java对象
<script src="http://unpkg.com/axios/dist/axios.imin.js"></script>
<script>
	axios.post('http://caofuqiang.com:8080/student/findStudentByName',{name='张三'}).then(res=>{
		console.log(res);
	}).catch(err=>{
		console.log(err);
	})
</script>

三、axios并发请求

// axios.post的并发请求
<script src="http://unpkg.com/axios/dist/axios.imin.js"></script>
<script>
	axios.all([
		axios.get('http://caofuqiang.com:8080/student/getAllStudent'),
		axios.get('http://caofuqiang.com:8080/student/findStudentById',{params:{id:1}})
	]).then(res=>{//请求成功响应的是一个数组
		console.log(res[0]);
		console.log('----------------');
		console.log(res[1]);
	}).catch(err=>{
		console.log(err);
	})
</script>

// 使用spread方法处理响应数组结果
<script src="http://unpkg.com/axios/dist/axios.imin.js"></script>
<script>
	axios.all([
		axios.get('http://caofuqiang.com:8080/student/getAllStudent'),
		axios.get('http://caofuqiang.com:8080/student/findStudentById',{params:{id:1}})
	]).then(
		axios.spread((res1,res2)=>{
			console.log(res1);
			console.log(res2);
		})
	).catch(err=>{
		console.log(err);
	})
</script>

四、axios全局配置

// 使用spread方法处理响应数组结果
<script src="http://unpkg.com/axios/dist/axios.imin.js"></script>
<script>
	axios.defaults.baseURL='http://caofuqiang.com:8080/student';//配置全局属性
	axios.defaults.timeout=5;
	axios.get("getAllStudent").then(res=>{//在全局配置的基础上进行请求
		console.log(res);
	})
	axios.get("pGet").then(res=>{
		console.log(res);
	}).catch(err=>{
		console.log(err);
	})
</script>

五、axios的实例

<script src="http://unpkg.com/axios/dist/axios.imin.js"></script>
<script>
	var newVar=axios.create({
		baseURL:'http://caofuqiang.com:8080/student';
		timeout:5000
	})//创建axios的实例
	newVar({
		url:'getAllStudent'
	}).then(res=>{
		console.log(res);
	})
</script>

六、axios的拦截器

axios给我们提供了两大类拦截器 一种是请求方向的拦截（成功请求，失败的）
另一种是响应方向的（成功的 失败的）

拦截器的作用 用于我们在网络请求的时候在发起请求或者响应时对操作进行响应的处理
发起请求时可以添加网页加载的动画 强制登录
响应的时候可以进行响应的数据处理

//请求方向拦截器
<script src="http://unpkg.com/axios/dist/axios.imin.js"></script>
<script>
	axios.interceptors.request.use(config=>{
		console.log("进入请求拦截器");
		console.log(config);
		return config;
	},err=>{
		console.log("请求方向失败");
		console.log(err);
	})
	axios.get("http://caofuqiang.com:8080/student/getAllStudent").then(res=>{
		console.log(res);
	})
</script>

//响应方向拦截器
<script src="http://unpkg.com/axios/dist/axios.imin.js"></script>
<script>
	axios.interceptors.response.use(config=>{
		console.log("进入响应拦截器");
		return config.data;
	},err=>{
		console.log("响应方向失败");
		console.log(err);
	})
	axios.get("http://caofuqiang.com:8080/student/getAllStudent").then(res=>{
		console.log(res);
	})
</script>

七、axios的封装

//封装位置 文件绝对位置./network/request/request.js
import axios from 'axios'
export function request(config,success,fail){
	axios({
		url:config
	}).then(res=>{
		success(res);
	}).catch(err=>{
		fail(err);
	})
}
//调用者位置
import {request} from './network/request/request.js'
request('http://caofuqiang.com:8080/student/getAllStudent',res=>{
	console.log(res);
},err=>{
	console.log(err);
})

//封装位置
import axios from 'axios'
axios.default.baseURL='http://caofuqiang.com:8080/student';
axios(config.url).then(res=>{
	config.success(res);
}).catch(err=>{
	config.fail(err);
})
//调用者位置
import {request} from './network/request/request.js'
request({
	url:'getAllStudent',
	success:res=>{
		console.log(res);
	},
	fail:err=>{
		console.log(err);
	}
})

最推荐

//封装位置
import axios from 'axios'
let newVar =axios.create({
	baseURL:"http://caofuqiang.com:8080/student",
	timeout:5000
});
return newVar(config);
//调用者位置
import {request} from './network/request/request.js'
request({
	url:'getAllStudent',
}).then(res=>{
	console.log(res);
})