ES6中Promise的基本用法介绍

来源：动视网责编：小采时间：2020-11-27 19:29:21

ES6中Promise的基本用法介绍

ES6中Promise的基本用法介绍:本篇文章给大家带来的内容是关于ES6中Promise的基本用法介绍，有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。Promise是一种异步编程的解决方案1.es5的回调{ let ajax = function (callback) { console.log('r

推荐度：

点击下载本文 文档为doc格式

导读ES6中Promise的基本用法介绍:本篇文章给大家带来的内容是关于ES6中Promise的基本用法介绍，有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。Promise是一种异步编程的解决方案1.es5的回调{ let ajax = function (callback) { console.log('r

本篇文章给大家带来的内容是关于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 分钟

Promise基本用法