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); }

  1. 专栏

  2. 超级有温度的代码

  3. 文章详情

ES6中Promise的基本用法介绍

ican ES6中Promise的基本用法介绍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); }

  • ES6中Promise的基本用法介绍

    • 举报

你可能感兴趣的

评论

默认排序 时间排序

载入中…

显示更多评论

ES6中Promise的基本用法介绍

本文由(壳先生)整理自网络,如转载请注明出处:https://www.mrshell.com;
本站发布的内容若侵犯到您的权益,请邮件联系 i@mrshell.com 删除,我们将及时处理!
===========================================================================

1. 本站大部分下载资源收集于网络,不保证其完整性以及安全性,请下载后自行测试。
2. 本站资源仅供学习和交流使用,版权归资源原作者所有,请在下载后24小时之内自觉删除。
3. 不得使用于非法商业用途,商用请支持正版!不得违反国家法律,否则后果自负!
4. 若作商业用途,请购买正版,由于未及时购买和付费发生的侵权行为,与本站无关。
5. 如有链接无法下载、失效或广告,请联系管理员处理!
6. 本站资源售价只是赞助,收取费用仅维持本站的日常运营所需!

=================================================================

壳先生 » ES6中Promise的基本用法介绍

发表评论

提供最优质的资源集合

立即查看 了解详情