async 和 await
async
该关键字放到函数前面、任何一个 async 函数都会隐式返回一个 promise
await
该关键字只能在使用 async 定义的函数中使用
await后面可以直接跟一个 Promise实例对象、await函数不能单独使用
1.async 和 await 的简单使用
<!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://10.5.34.66:8104';
axios.get('/temp/string')
.then(function(ret){
console.log(ret.data)
})
// ===========================================================================================
// 方案二、采用 async await 直接得到数据
// async作为一个关键字放到函数前面
// 任何一个async函数都会隐式返回一个promise
async function queryData() {
// await关键字只能在使用async定义的函数中使用，可以用于异步操作（await可以得到异步的结果）
let ret = await axios.get('/temp/string');
console.log(ret.data)
}
queryData()
// ===========================================================================================
// 方案三、采用 async await 结合 .then 进行异步访问（前后结果有依赖）
// async作为一个关键字放到函数前面
// 任何一个async函数都会隐式返回一个promise
async function queryDataOne() {
// await关键字只能在使用async定义的函数中使用，可以用于异步操作（await可以得到异步的结果）
let ret = await axios.get('/temp/string');
return ret.data;
}
// 任何一个async函数都会隐式返回一个promise 我们可以使用 then 进行链式编程
// 将上一步的结果得到以后，才能继续执行此函数功能
// 其中 data 就是上一步中返回的 ret.data 数据
queryDataOne().then(function (data) {
console.log(data)
})
// ========================================================================================
// 方案四、使用 async await 结合 promise 进行异步操作（前后结果有依赖）
// 任何一个async函数都会隐式返回一个promise
async function queryDataTwo(url){
let ret = await new Promise(function(resolve, reject){
let xhr = new XMLHttpRequest();
// 指定回调函数
xhr.onreadystatechange = function(){
// 服务器未完成响应
if(xhr.readyState !== 4) return;
// 请求成功，并成功返回
if(xhr.readyState === 4 && xhr.status === 200) {
// 处理正常的情况
resolve(xhr.responseText);
}else{
// 处理异常情况
reject('出错了');
}
};
// 发送 get 方式的 ajax 请求
xhr.open('get', url);
xhr.send(null);
});
return ret;
}
// 任何一个async函数都会隐式返回一个promise 我们可以使用 then 进行链式编程
queryDataTwo("http://10.5.34.66:8104/temp/string").then(function (data) {
console.log(data)
})
</script>
</body>
</html>
2.async 和 await 处理多个异步请求
<!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://10.5.34.66:8104';
async function queryData() {
// 多个异步请求之间有顺序时，只需要用 await 标明即可，它自己会保证顺序执行
// 函数处理多个异步函数
// 添加 await 之后 当前的 await 返回结果之后才会执行后面的代码
// 让异步代码看起来、表现起来更像同步代码
let info = await axios.get('/temp');
// 上一步完成以后，才会执行下一步
// 根据上一步得到用户整个信息，然后利用用户的整个信息（axios得到的是对象)得到用户的id
// 最后利用 id 结合后台相应的 controller 得到相应的资源
let ret = await axios.get('/temp/' + info.data.id);
return ret.data;
}
// 参数 data 为 queryData 函数执行后的结果
queryData().then(function(data){
console.log(data)
})
</script>
</body>
</html>