本文由 DTcms素材网 – DT素材网 发布，转载请注明出处，如有问题请联系我们！ES6中Promise的基本用法介绍
收藏 本篇文章给大家带来的内容是关于ES6中Promise的基本用法介绍，有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。
Promise是一种异步编程的解决方案
1.es5的回调
{ let ajax = function (callback) { console.log('run1'); setTimeout(function () { callback && callback.call(); }, 1000); }; ajax(function () { console.log('timeout1'); }); // 结果：立马输出 run1，1秒之后输出 timeout1 // 1.如果过程变得复杂，a()=>b()=>c()=>d()... ，用回调来处理会使代码变得复杂 // 2.代码复杂影响后期维护，很难一眼看出回调之间的顺序问题，代码难以阅读 }
2.es6的Promise
{ let ajax = function () { console.log('run2'); // 返回一个对象（Promise实例），这个实例具有then()方法，就是执行下一步的功能 return new Promise(function (resolve, reject) { // resolve表示执行下一步操作 reject表示中断当前操作 setTimeout(function () { resolve(); }, 1000); }); }; ajax().then(function () { // 这个方法对应resolve console.log('timeout2'); }, function () { // 这个方法对应reject }); // 结果：立马输出 run2，1秒之后输出 timeout2 // 结果和es5一样，但是代码可读性、可维护性更高 }
3.then()的串联操作
{ let ajax = function () { console.log('run3'); return new Promise(function (resolve, reject) { setTimeout(function () { resolve(); }, 2000); }); }; ajax().then(function () { // 返回Promise实例，通过不断的下一步下一步，实现了串联操作的结果 return new Promise(function (resolve, reject) { setTimeout(function () { resolve(); }, 3000); }); }).then(function () { console.log('timeout3'); }); // 结果：立马输出 run3，5秒之后输出 timeout3 }
4.catch方法
{ let ajax = function (num) { console.log('run4'); return new Promise(function (resolve, reject) { if (num >= 5) { resolve(); } else { throw Error(`出错了，${num}小于5`); } }); }; // catch方法用来捕获异常 ajax(6).then(function () { console.log(6); }).catch(function (err) { console.log(err); }); // 结果：输出 run4 6 ajax(3).then(function () { console.log(3); }).catch(function (err) { console.log(err); }); // 结果：输出 run4 Error: 出错了，3小于5 }
Promise.all()
例子：所有图片加载完再统一添加到页面
{ function loadImg(src) { return new Promise((resolve, reject) => { let img = document.createElement('img'); img.src = src; // onload监听图片加载完成 img.onload = function () { resolve(img); }; // onerror监听图片加载失败 img.onerror = function (err) { reject(err); }; }); } function showImgs(imgs) { console.log(imgs); // [img, img, img] 三个img对象 imgs.forEach(function (img) { document.body.appendChild(img); }); } // Promise.all 把多个Promise实例当做一个Promise实例 // Promise.all(array).then(fn),array对应多个Promise实例，当所有实例状态发生改变时，新的Promise实例才会跟着发生变化 // Promise.all也是返回Promise实例，所以也有.then()方法 // 当三张图片都加载完成，才会执行showImgs，如果其中有图片正在加载，不会执行showImgs，页面上看不到任何一张图片 Promise.all([ loadImg('https://img3.doubanio.com/view/photo/s_ratio_poster/public/p2530513100.webp'), loadImg('https://img3.doubanio.com/view/photo/s_ratio_poster/public/p2529571873.webp'), loadImg('https://img1.doubanio.com/view/photo/s_ratio_poster/public/p2395733377.webp') ]).then(showImgs); }
Promise.race()
例子：有一个图片加载完就添加到页面，其余的不管，只显示最先加载完成的一张图片
{ function loadImg(src) { return new Promise((resolve, reject) => { let img = document.createElement('img'); img.src = src; // onload监听图片加载完成 img.onload = function () { resolve(img); }; // onerror监听图片加载失败 img.onerror = function (err) { reject(err); }; }); } function showImgs(img) { let p = document.createElement('p'); p.appendChild(img); document.body.appendChild(p); } // 当某一张图片率先加载完成，执行showImgs显示这张图片，剩余图片不再响应 Promise.race([ loadImg('https://img3.doubanio.com/view/photo/s_ratio_poster/public/p2530513100.webp'), loadImg('https://img3.doubanio.com/view/photo/s_ratio_poster/public/p2529571873.webp'), loadImg('https://img1.doubanio.com/view/photo/s_ratio_poster/public/p2395733377.webp') ]).then(showImgs); }
-
专栏
-
超级有温度的代码
-
文章详情
ican 
26 发布于 超级有温度的代码
1 天前发布
【ES6入门12】：Promise
-
javascript
-
es6
-
前端
19 次阅读 · 读完需要 15 分钟
0
Promise基本用法
Promise是一种异步编程的解决方案
1.es5的回调
{ let ajax = function (callback) { console.log('run1'); setTimeout(function () { callback && callback.call(); }, 1000); }; ajax(function () { console.log('timeout1'); }); // 结果：立马输出 run1，1秒之后输出 timeout1 // 1.如果过程变得复杂，a()=>b()=>c()=>d()... ，用回调来处理会使代码变得复杂 // 2.代码复杂影响后期维护，很难一眼看出回调之间的顺序问题，代码难以阅读 }
2.es6的Promise
{ let ajax = function () { console.log('run2'); // 返回一个对象（Promise实例），这个实例具有then()方法，就是执行下一步的功能 return new Promise(function (resolve, reject) { // resolve表示执行下一步操作 reject表示中断当前操作 setTimeout(function () { resolve(); }, 1000); }); }; ajax().then(function () { // 这个方法对应resolve console.log('timeout2'); }, function () { // 这个方法对应reject }); // 结果：立马输出 run2，1秒之后输出 timeout2 // 结果和es5一样，但是代码可读性、可维护性更高 }
3.then()的串联操作
{ let ajax = function () { console.log('run3'); return new Promise(function (resolve, reject) { setTimeout(function () { resolve(); }, 2000); }); }; ajax().then(function () { // 返回Promise实例，通过不断的下一步下一步，实现了串联操作的结果 return new Promise(function (resolve, reject) { setTimeout(function () { resolve(); }, 3000); }); }).then(function () { console.log('timeout3'); }); // 结果：立马输出 run3，5秒之后输出 timeout3 }
4.catch方法
{ let ajax = function (num) { console.log('run4'); return new Promise(function (resolve, reject) { if (num >= 5) { resolve(); } else { throw Error(`出错了，${num}小于5`); } }); }; // catch方法用来捕获异常 ajax(6).then(function () { console.log(6); }).catch(function (err) { console.log(err); }); // 结果：输出 run4 6 ajax(3).then(function () { console.log(3); }).catch(function (err) { console.log(err); }); // 结果：输出 run4 Error: 出错了，3小于5 }
Promise.all()
例子：所有图片加载完再统一添加到页面
{ function loadImg(src) { return new Promise((resolve, reject) => { let img = document.createElement('img'); img.src = src; // onload监听图片加载完成 img.onload = function () { resolve(img); }; // onerror监听图片加载失败 img.onerror = function (err) { reject(err); }; }); } function showImgs(imgs) { console.log(imgs); // [img, img, img] 三个img对象 imgs.forEach(function (img) { document.body.appendChild(img); }); } // Promise.all 把多个Promise实例当做一个Promise实例 // Promise.all(array).then(fn),array对应多个Promise实例，当所有实例状态发生改变时，新的Promise实例才会跟着发生变化 // Promise.all也是返回Promise实例，所以也有.then()方法 // 当三张图片都加载完成，才会执行showImgs，如果其中有图片正在加载，不会执行showImgs，页面上看不到任何一张图片 Promise.all([ loadImg('https://img3.doubanio.com/view/photo/s_ratio_poster/public/p2530513100.webp'), loadImg('https://img3.doubanio.com/view/photo/s_ratio_poster/public/p2529571873.webp'), loadImg('https://img1.doubanio.com/view/photo/s_ratio_poster/public/p2395733377.webp') ]).then(showImgs); }
Promise.race()
例子：有一个图片加载完就添加到页面，其余的不管，只显示最先加载完成的一张图片
{ function loadImg(src) { return new Promise((resolve, reject) => { let img = document.createElement('img'); img.src = src; // onload监听图片加载完成 img.onload = function () { resolve(img); }; // onerror监听图片加载失败 img.onerror = function (err) { reject(err); }; }); } function showImgs(img) { let p = document.createElement('p'); p.appendChild(img); document.body.appendChild(p); } // 当某一张图片率先加载完成，执行showImgs显示这张图片，剩余图片不再响应 Promise.race([ loadImg('https://img3.doubanio.com/view/photo/s_ratio_poster/public/p2530513100.webp'), loadImg('https://img3.doubanio.com/view/photo/s_ratio_poster/public/p2529571873.webp'), loadImg('https://img1.doubanio.com/view/photo/s_ratio_poster/public/p2395733377.webp') ]).then(showImgs); }
-
-
-
举报
你可能感兴趣的
评论
默认排序 时间排序
载入中…
显示更多评论
更多 推荐文章
- 04-17中国首个东盟电子商务平台“美丽湾”启动
- 04-16电商下乡，京东、苏宁、阿里农村遭遇战打响？
- 04-16买房还是炒股，2015年买房无法拒绝的5大理由
- 04-161季度多家房企利润跌幅超50% 去库存促销战打响
