您的位置:首页 > 大数据 > 人工智能

ES6_ 异步(Promise | Async/Await)

2019-06-04 16:31 393 查看
[code]
function loadImg(src) {
return new Promise((resolve, reject) => {
let img = document.createElement('img');
img.src = src;
img.onload = () => resolve(img);
img.onerror = () => reject('load img error!')
})
}

//Promise基本语法
let src = 'https://www.baidu.com/img/bd_logo1.png?qua=high';
loadImg(src)
.then(img => {
console.log(1, img.width)
return img
}, err => console.log(err))
.then(img => {
console.log(img)
})

//串联操作
var src1 = '1https://www.imooc.com/static/img/index/logo_new.png'
var result1 = loadImg(src1) //result1是Promise对象
var src2 = 'https://img1.mukewang.com/545862fe00017c2602200220-100-100.jpg'
var result2 = loadImg(src2) //result2是Promise对象
result1.then(function(img1
4000
) {
console.log('第一个图片加载完成', img1.width)
return result2 // 链式操作
}).then(function(img2) {
console.log('第二个图片加载完成', img2.width)
}).catch(function(ex) {
console.log(ex)
})

//并行异步任务
var p1 = new Promise(function(resolve, reject) {
setTimeout(resolve, 500, 'P1');
});
var p2 = new Promise(function(resolve, reject) {
setTimeout(resolve, 600, 'P2');
});
// 同时执行p1和p2,并在它们都完成后执行then:
Promise.all([p1, p2]).then(function(results) {
console.log(results); // 获得一个Array: ['P1', 'P2']
});

//Promise.race接受一个包含多个promise对象的数组,只要有一个完成,就执行success
var p1 = new Promise(function(resolve, reject) {
setTimeout(resolve, 500, 'P1');
});
var p2 = new Promise(function(resolve, reject) {
setTimeout(resolve, 600, 'P2');
});
Promise.race([p1, p2]).then(function(result) {
console.log(result); // 'P1'
});

// Async/Await
async function load() {
const result1 = await loadImg(src1)
console.log(2)
console.log(result1)
const result2 = await loadImg(src2)
console.log(3)
console.log(result2)
}
console.log(1)
load()   //console( 1 2 img 3 img )

//Async/Await 错误处理
async function myFunction() {
try {
await somethingThatReturnsAPromise();
} catch (err) {
console.log(err);
}
}

 

内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: