es6的Promise及es7的Async/Await应用
2023-09-27 14:29:06 时间
前言
关于Promise 对象,阮一峰大神在Es6入门中写过,这里就不再累赘了!大家可以在本文底部,点击查看Promise 文档。其实Promise 最早是源于社区,jquery的deferred对象,也有类似Promise的实现。我之前在判断文章中所有图片是否加载完成一文中有所提及!今天主要讲讲Promise及Async/Await的一些应用。http://www.tuicool.com/articles/jArEfmA
简单的停顿执行
var sleep = function (time) {
return new Promise(function (resolve, reject) {
setTimeout(function () {
resolve();
}, time);
})
};
var start = async function () {
console.log('start');
await sleep(3000);
console.log('end');
};
start();
上面代码中,控制台先输出start,稍等3秒后,输出了end。
获得返回值
var sleep = function (time) {
return new Promise(function (resolve, reject) {
setTimeout(function () {
// 返回 ‘ok’
resolve('ok');
}, time);
})
};
var start = async function () {
let result = await sleep(3000);
console.log(result); // 收到 ‘ok’
};
start()
await等待的虽然是promise对象,但不必写.then(..),直接可以得到返回值。
捕捉错误
var sleep = function (time) {
return new Promise(function (resolve, reject) {
setTimeout(function () {
// 模拟出错了,返回 ‘error’
reject('error');
}, time);
})
};
var start = async function () {
try {
console.log('start');
await sleep(3000); // 这里得到了一个返回错误
// 所以以下代码不会被执行了
console.log('end');
} catch (err) {
console.log(err); // 这里捕捉到错误 `error`
}
};
start()
既然.then(..)不用写了,那么.catch(..)也不用写,可以直接用标准的try catch语法捕捉错误。
循环多个await
var sleep = function (time) {
return new Promise(function (resolve, reject) {
setTimeout(function () {
resolve();
}, time);
})
};
var start = async function () {
for (var i = 1; i <= 10; i++) {
console.log(`当前是第${i}次等待..`);
await sleep(1000);
}
};
start()
会输出:
当前是第1次等待..
Promise {[[PromiseStatus]]: "pending", [[PromiseValue]]: undefined}
当前是第2次等待..
当前是第3次等待..
当前是第4次等待..
当前是第5次等待..
当前是第6次等待..
当前是第7次等待..
当前是第8次等待..
当前是第9次等待..
当前是第10次等待..
每隔1s输出一次。
经典面试题目
我之前提到的setTimeout和for循环结合,假如有如下代码:
for (var i = 0; i < 5; i++) {
(function(j) { // j = i
setTimeout(function() {
console.log(new Date, j);
}, 1000);
})(i);
}
console.log(new Date, i);
如何对其进行改进,让每隔1s输出一个数字,顺序是:0 -> 1 -> 2 -> 3 -> 4 -> 5
不用es6如下写
for (var i = 0; i < 5; i++) {
(function(j) {
setTimeout(function() {
console.log(new Date, j);
}, 1000 * j); // 这里修改 0~4 的定时器时间
})(i);
}
setTimeout(function() { // 这里增加定时器,超时设置为 5 秒
console.log(new Date, i);
}, 1000 * i);
用Es6的Promise的写法如下:
const tasks = []; // 这里存放异步操作的 Promise
const output = (i) => new Promise((resolve) => {
setTimeout(() => {
console.log(new Date, i);
resolve();
}, 1000 * i);
});
// 生成全部的异步操作
for (var i = 0; i < 5; i++) {
tasks.push(output(i));
}
// 异步操作完成之后,输出最后的 i
Promise.all(tasks).then(() => {
setTimeout(() => {
console.log(new Date, i);
}, 1000);
});
用ES7 async和await的写法如下:
const sleep = (timeountMS) => new Promise((resolve) => {
setTimeout(resolve, timeountMS);
});
(async () => { // 声明即执行的 async 函数表达式
for (var i = 0; i < 5; i++) {
await sleep(1000);
console.log(new Date, i);
}
await sleep(1000);
console.log(new Date, i);
})();
上面是对es6的Promise及es7的Async/Await的简单应用,关于ES6的Promise,可以查看阮一峰大神的文档: http://es6.ruanyifeng.com/#docs/promise
相关文章
- [转] ES6展开运算符
- ES6(十三)Reflect
- ES6(六)数值的扩展
- 【Javascript】Es6的知识与技巧(示例)
- ES6函数参数默认值作用域的模拟原理实现与个人的一些推测
- es6入门3--箭头函数与形参等属性的拓展
- Es6 函数式编程 MayBe函子的简单示例
- ES6精解:变量的解构赋值
- ES6语法中--let和const 的区别
- ES5和ES6新增的数组方法
- 【ES6(2015)】解构赋值Desctructuring
- ES6中Object.assign()与深拷贝浅拷贝
- JavaScript、ES5和ES6的介绍和区别
- ES6里let、const、var区别总结
- 解决nuxt官方脚手架的一些坑:1、支持es6+语法 2、样式支持sass
- ES6 Features系列:Template Strings & Tagged Template Strings
- ES6之Object.assign()详解