Web全栈探索，Vue基础系列，前后端交互（三）
axios
1.特性
- 基于promise用于浏览器和node.js的http客户端
- 支持浏览器和node.js
- 支持promise
- 能拦截请求和响应
- 自动转换JSON数据
- 能转换请求和响应数据
2.支持库文件下载地址
https://github.com/axios/axios
库文件地址（解压后）：
axios-master\dist\axios.js3.入门代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<script type="text/javascript" src="../js/axios.js"></script>
<script type="text/javascript">
axios.get('http://10.5.34.66:8104/temp/string').then(function(ret){
// 此种方法只能用于获取后台字符串返回结果
// .data用于直接获取后台的实际数据
console.log(ret.data)
// 原对象除了 data 数据以外，还有其他很多属性
console.log(ret)
})
</script>
</body>
</html>
4.常用 API
1.get和 delete请求传递参数
- 通过传统的url 以 ? 的形式传递参数
- restful 形式传递参数
- 通过params 形式传递参数
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<script type="text/javascript" src="../js/axios.js"></script>
<script type="text/javascript">
// 以 传统的url 以 ? 的形式传递参数
axios.get('http://10.5.34.66:8104/temp?id=1').then(function(ret){
console.log(ret.data)
})
// 以 restful 形式传递参数
axios.get('http://10.5.34.66:8104/temp/1').then(function(ret){
console.log(ret.data)
})
// 以 params 形式传参
axios.get('http://10.5.34.66:8104/temp',{
params:{
id: 1
}
}).then(function(ret){
// 以 restful 形式传递参数
console.log(ret.data)
})
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<script type="text/javascript" src="../js/axios.js"></script>
<script type="text/javascript">
// 以 传统的url 以 ? 的形式传递参数
axios.delete('http://10.5.34.66:8104/temp?id=1').then(function(ret){
console.log(ret.data)
})
// 以 restful 形式传递参数
axios.delete('http://10.5.34.66:8104/temp/1').then(function(ret){
console.log(ret.data)
})
// 以 params 形式传参
axios.delete('http://10.5.34.66:8104/temp',{
params:{
id: 1
}
}).then(function(ret){
// 以 restful 形式传递参数
console.log(ret.data)
})
</script>
</body>
</html>
2.post 和 put 请求传递参数
- 通过选项传递参数
- 通过 URLSearchParams 传递参数
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<script type="text/javascript" src="../js/axios.js"></script>
<script type="text/javascript">
/*
axios请求参数传递
*/
axios.post('http://10.5.34.66:8104/temp', {
id: 1,
name: 'lanyue'
}).then(function(ret){
console.log(ret.data)
})
let paramsOne = new URLSearchParams();
paramsOne.append('id', 1);
paramsOne.append('name', 'lanyue');
axios.post('http://10.5.34.66:8104/temp', paramsOne).then(function(ret){
console.log(ret.data)
})
// axios put 请求传参
axios.put('http://10.5.34.66:8104/temp', {
id: 1,
name: 'lanyue'
}).then(function(ret){
console.log(ret.data)
})
let paramsTwo = new URLSearchParams();
paramsTwo.append('id', 1);
paramsTwo.append('name', 'lanyue');
axios.put('http://10.5.34.66:8104/temp', paramsTwo).then(function(ret){
console.log(ret.data)
})
</script>
</body>
</html>
5.响应结果
注意：如果后台返回的是 json 数据，axios 会默认将数据转换为对象形式，前台获得数据后可以直接使用对象形式读取数据
- data ===> 实际响应回来的数据
- headers ===> 响应信息头
- status ===> 响应状态码
- statusText ===> 响应状态信息
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<script type="text/javascript" src="../js/axios.js"></script>
<script type="text/javascript">
/*
axios 响应结果
*/
axios.get('http://http://10.5.34.66:8104/temp').then(function(ret){
// 以对象方式调用结果
console.log(ret.data.id)
})
</script>
</body>
</html>6.全局配置
# 配置公共的请求头
axios.defaults.baseURL = 'https://api.example.com';
# 配置 超时时间
axios.defaults.timeout = 2500;
# 配置公共的请求头
axios.defaults.headers.common['Authorization'] = AUTH_TOKEN;
# 配置公共的 post 的 Content-Type
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';示例代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<script type="text/javascript" src="../js/axios.js"></script>
<script type="text/javascript">
/*
axios 全局配置
*/
// 配置请求的基准URL地址
// 这样可以简化代码编写
axios.defaults.baseURL = 'http://10.5.34.66:8104/';
axios.get('temp').then(function(ret){
console.log(ret.data)
})
// 配置请求头信息
// 每次放松请求时，都会添加自己定义的请求头
axios.defaults.headers['myRequestHead'] = 'huHai';
axios.get('http://10.5.34.66:8104/temp').then(function(ret){
console.log(ret.data)
})
</script>
</body>
</html>
请求头生效效果
7.axios 拦截器
注意：拦截器的作用并非拦住数据包不让收，而是在请求、响应之后对数据进行相应的操作
1.请求拦截器
请求拦截器的作用是在请求发送前进行一些操作
例如在每个请求体里加上token，统一做了处理如果以后要改也非常容易
2.响应拦截器
响应拦截器的作用是在接收到响应后进行一些操作
例如在服务器返回登录状态失效，需要重新登录的时候，跳转到登录页
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<script type="text/javascript" src="../js/axios.js"></script>
<script type="text/javascript">
/*
axios请求拦截器
*/
axios.interceptors.request.use(function(config) {
// 利用请求拦截器为所有请求添加如下请求头
config.headers.mytoken = 'huHai';
// 必须返回 配置好的 config，否则拦截器设置无效
return config;
}, function(err){
console.log(err)
})
/*
axios响应拦截器
*/
axios.interceptors.response.use(function(res) {
// 得到响应结果，并利用响应拦截器将真正有效的数据（而不再是整个响应对象）返回
let data = res.data;
return data;
}, function(err){
console.log(err)
})
// 测试配置好拦截器的 axios
axios.get('http://10.5.34.66:8104/temp').then(function(data){
console.log(data)
})
</script>
</body>
</html>
