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); } }
相关文章推荐
- ES6/7/8新特性Promise,async,await,fetch带我们逃离异步回调的深渊
- js异步回调Async/Await与Promise区别
- 关于Promise,Generator,async / await 对异步的处理
- async/await与promise(nodejs中的异步操作问题)
- ES6 Promise 和 Async/await的使用
- 前端项目中常用es6知识总结 -- Async、Await让异步美如画
- 理解异步之美:Promise与async await(一)
- ES6总结--Promise 、Generator 、Async/Await
- 详解koa2学习中使用 async 、await、promise解决异步的问题
- 异步解决方案之Promise和async/await
- 前端异步流程工具的方案promise、gengerator、async-await、node.js的nextTick setlmmidate、第三方库(async.js)
- ie兼容es6,ie兼容ES6的方法,包括箭头函数,Promise,async,await
- ES6系列文章 异步神器async-await
- 前端的异步解决方案之Promise和Await-Async
- [完结篇] - 理解异步之美 --- promise与async await (三)
- 理解异步之美:Promise 与 async await(二)
- Promise,async,await,fetch带我们逃离异步回调的深渊
- 使用Promise和async-await实现的一个异步遍历+同步执行任务的实例
- 异步Promise及Async/Await可能最完整入门攻略
- NodeJS-Promise、await、async异步变同步