<!DOCTYPE html>
<html>
<head>
<title>Promise、async、await</title>
</head>
<body>
<script type="text/javascript">
//promise用法(返回异步方法返回的数据,resolve获取数据成功后调用的方法, reject获取数据失败后调用的方法)
//第一种写法
var p = new Promise((resolve,reject) => {
//模拟ajax请求异步获取数据
setTimeout(() => {
let name = 'lindont';
resolve(name); //成功调用的函数
//reject('error'); //失败调用的函数
},1000);
});
p.then((data) => {
console.log(data);
});
//第二种写法
var getData = (resolve,reject) => {
setTimeout(() => {
let name = 'HuangHaoXin';
resolve(name);
},1000);
}
var p2 = new Promise(getData);
p2.then((data) => {
console.log(data);
});
//async 和 await (async可以将一个同步的方法改为异步方法, await具有阻塞功能变相把一个异步方法变成同步方法, await必须用在async方法中)
//第一种写法
var getData2 = async () => {
console.log(2);
return 'async data'
}
var test = async () => {
console.log(1);
var d = await getData2();
console.log(d);
console.log(3);
}
test(); //结果按顺序输出 1 2 3,说明await等待getData2方法执行完毕再往下执行(即自定义一个异步方法，使用await等待另一个异步方法执行完毕，此时异步方法变相成为了同步)
//第二种写法
var getData3 = () => {
return new Promise((resolve,reject) => {
setTimeout(() => {
var username = 'good day';
resolve(username);
},1000);
});
}
var test2 = async () => {
var data = await getData3();
console.log(data);
}
test2();
</script>
</body>
</html>
原来async 函数返回的是一个promise 对象，如果要获取到promise 返回值，我们应该用then 方法， 继续修改代码
async function timeout() {
return 'hello world'}timeout().then(result => {
console.log(result);})
console.log('虽然在后面，但是我先执行');
image.png
网友评论