![1220447-20200228114533789-1478837195.png](https://i-blog.csdnimg.cn/blog_migrate/f5dca0d47790639f842767ffc54b8db7.png)
![1220447-20200228114637666-1546008274.png](https://i-blog.csdnimg.cn/blog_migrate/53d0b0d1f73c7a48dc6fac03e0cfb9e5.png)
<!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://localhost:3000/adata').then(function(ret){
// 注意data属性是固定的用法,用于获取后台的实际数据
// console.log(ret.data)
console.log(ret)
})
</script>
</body>
</html>
![1220447-20200228150946352-1446245039.png](https://i-blog.csdnimg.cn/blog_migrate/d34624daf0ed9b2dcaddc6aeb20d8bb5.png)
![1220447-20200228151600519-1819980591.png](https://i-blog.csdnimg.cn/blog_migrate/3dcbda3bd2bc7955a363907dbdd7518e.png)
![1220447-20200228151650220-2054590872.png](https://i-blog.csdnimg.cn/blog_migrate/ce71b7bda61773e3ad026b6b9517a620.png)
![1220447-20200228152003689-317819977.png](https://i-blog.csdnimg.cn/blog_migrate/83681e1ee70996bd0f0a5babb4ab76f5.png)
![1220447-20200228152037543-1733732270.png](https://i-blog.csdnimg.cn/blog_migrate/68fd5c25d230699e4b39876912536c77.png)
![1220447-20200228152211646-2109864363.png](https://i-blog.csdnimg.cn/blog_migrate/d38b46484f18c614ea5028a10025a07c.png)
<!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请求传参
// axios.get('http://localhost:3000/axios?id=123').then(function(ret){
// console.log(ret.data)
// })
// axios.get('http://localhost:3000/axios/123').then(function(ret){
// console.log(ret.data)
// })
// axios.get('http://localhost:3000/axios', {
// params: {
// id: 789
// }
// }).then(function(ret){
// console.log(ret.data)
// })
// axios delete 请求传参
// axios.delete('http://localhost:3000/axios', {
// params: {
// id: 111
// }
// }).then(function(ret){
// console.log(ret.data)
// })
// axios.post('http://localhost:3000/axios', {
// uname: 'lisi',
// pwd: 123
// }).then(function(ret){
// console.log(ret.data)
// })
// var params = new URLSearchParams();
// params.append('uname', 'zhangsan');
// params.append('pwd', '111');
// axios.post('http://localhost:3000/axios', params).then(function(ret){
// console.log(ret.data)
// })
// axios put 请求传参
axios.put('http://localhost:3000/axios/123', {
uname: 'lisi',
pwd: 123
}).then(function(ret){
console.log(ret.data)
})
</script>
</body>
</html>
![1220447-20200228152437818-61076365.png](https://i-blog.csdnimg.cn/blog_migrate/51eeae47731bd875249fdfc1b13d2ea0.png)
![1220447-20200228152518254-381397785.png](https://i-blog.csdnimg.cn/blog_migrate/f73bc97776af581df9dfac5e3731948c.png)
![1220447-20200228152733170-2009850812.png](https://i-blog.csdnimg.cn/blog_migrate/d7a65532a782d971577591a8608d3ca6.png)
<!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://localhost:3000/axios-json').then(function(ret){
// console.log(ret.data.uname)
// })
// 配置请求的基准URL地址
axios.defaults.baseURL = 'http://localhost:3000/';
// 配置请求头信息
axios.defaults.headers['mytoken'] = 'hello';
axios.get('axios-json').then(function(ret){
console.log(ret.data.uname)
})
</script>
</body>
</html>
![1220447-20200228153023162-1864691304.png](https://i-blog.csdnimg.cn/blog_migrate/11fa62083d22422e599296b51bc20e07.png)
![1220447-20200228153223371-1629610494.png](https://i-blog.csdnimg.cn/blog_migrate/d99dbc4817061ba4e81494fa07111501.png)
<!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) {
console.log(config.url)
config.headers.mytoken = 'nihao';
return config;
}, function(err){
console.log(err)
})
axios.interceptors.response.use(function(res) {
// console.log(res)
var data = res.data;
return data;
}, function(err){
console.log(err)
})
axios.get('http://localhost:3000/adata').then(function(data){
console.log(data)
})
</script>
</body>
</html>
![1220447-20200228153642202-799649331.png](https://i-blog.csdnimg.cn/blog_migrate/02fcd8fc88ad81b526355cd0fc2b36d9.png)
<!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">
/*
async/await 处理异步操作:
async函数返回一个Promise实例对象
await后面可以直接跟一个 Promise实例对象
*/
axios.defaults.baseURL = 'http:localhost:3000';
// axios.get('adata').then(function(ret){
// console.log(ret.data)
// })
// async function queryData() {
// var ret = await axios.get('adata');
// // console.log(ret.data)
// return ret.data;
// }
async function queryData() {
var ret = await new Promise(function(resolve, reject){
setTimeout(function(){
resolve('nihao')
},1000);
})
// console.log(ret.data)
return ret;
}
queryData().then(function(data){
console.log(data)
})
</script>
</body>
</html>
![1220447-20200228154135833-165842243.png](https://i-blog.csdnimg.cn/blog_migrate/e5fee312c1c33efe6fbeb92802c02f67.png)
<!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">
/*
async/await处理多个异步任务
*/
axios.defaults.baseURL = 'http://localhost:3000';
async function queryData() {
var info = await axios.get('async1');
var ret = await axios.get('async2?info=' + info.data);
return ret.data;
}
queryData().then(function(data){
console.log(data)
})
</script>
</body>
</html>