0
点赞
收藏
分享

微信扫一扫

ES6中的promise、async、await用法详解

<!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('虽然在后面,但是我先执行');

ES6中的promise、async、await用法详解_获取数据

image.png

详解ES6中的async/await

ES6中的promise、async、await用法详解

举报

相关推荐

0 条评论