ES6中Promise的使用方法实例总结


Posted in Javascript onFebruary 18, 2020

本文实例讲述了ES6中Promise的使用方法。分享给大家供大家参考,具体如下:

在javascript中,代码是单线程执行的,对于一些比较耗时的IO操作,都是通过异步回调函数来实现的。

但是这样会存在一个问题,当下一个的操作需要上一个操作的结果时,我们只能把代码嵌到上一个操作的回调函数里,这样一层嵌一层,最终形成回调地狱。

$.get('/login.php', function (login) {
  $.get('/user.php', function (user) {
    $.get('/info.php', function (info) {
      //代码就这样一层嵌一层,不够直观,维护也麻烦
    });
  });
});

为了解决这种问题,ES6中就提供了Promise方法来解决这种问题。

Promise是一个构造函数,通过它,我们可以创建一个Promise实例对象。

let p = new Promise(function (resolve, reject) {
  setTimeout(() => {
    console.log('OK');
    resolve('OK');
  }, 1000);
});

Promise构造函数接受一个函数作为参数,这个函数有两个参数,resolve和reject。

resolve函数是将Promise的状态设置为fulfilled(完成),reject函数是将Promise的状态设置为rejected(失败)。

上述代码,我们并没有进行任何调用,当运行时,间隔1秒后输出了'OK'。所以这里需要注意,我们通常使用Promise时,需要在外层再包裹一层函数。

let p = function () {
  return new Promise(function (resolve, reject) {
    setTimeout(() => {
      console.log('OK');
      resolve('OK');
    }, 1000);
  });
};
p();

上面的代码p();返回的是一个Promise实例对象,Promise对象上有 then() , catch() , finally() 方法。

then方法有两个参数,onFulfilled和onRejected,都是函数。

onFulfilled用于接收resolve方法传递过来的数据,onRejected用于接收reject方法传递过来的数据。

let p = function () {
  return new Promise(function (resolve, reject) {
    setTimeout(() => {
      if (Math.random() > 0.5) {
        resolve('OK');
      } else {
        reject('ERR');
      }
    }, 1000);
  });
};
p().then(function (data) {
  console.log('fulfilled', data);
}, function (err) {
  console.log('rejected', err);
});

then()方法总是会返回一个Promise实例,这样我们就可以一直调用then()。

在then方法中,你既可以return 一个具体的值 ,还可以return 一个Promise对象。

如果直接return的是一个数据,那then方法会返回一个新Promise对象,并以该数据进行resolve。

let p = function () {
  return new Promise(function (resolve, reject) {
    resolve(1);
  });
};
p().then(function (data) {
  console.log(`第 ${data} 次调用`);
  //注意这里直接返回的值
  //then会创建一个新的Promise对象,并且以返回的值进行resolve
  //那么该值会被下面的then方法的onFulfilled回调拿到
  return ++data;
}).then(function (data) {
  console.log(`第 ${data} 次调用`);
  return ++data;
}).then(function (data) {
  console.log(`第 ${data} 次调用`);
  return ++data;
});

如果返回的是一个Promise对象,请看下面代码。

let p = function () {
  return new Promise(function (resolve, reject) {
    resolve(1);
  });
};
p().then(function (data) {
  console.log(`第 ${data} 次调用`);
  return new Promise(function (resolve, reject) {
    resolve(++data);
  });
}).then(function (data) {
  console.log(`第 ${data} 次调用`);
  return new Promise(function (resolve, reject) {
    resolve(++data);
  });
}).then(function (data) {
  console.log(`第 ${data} 次调用`);
  return new Promise(function (resolve, reject) {
    resolve(++data);
  });
});

其实效果与直接返回值的是一样的。

即然then()可以进行链式操作,那我们最早之前的回调地狱写法,就可以通过它进行改进了。

function login() {
  return new Promise(function (resolve, reject) {
    $.get('/login.php', function (result) {
      resolve(result);
    });
  });
}
function user(data) {
  return new Promise(function (resolve, reject) {
    $.get('/user.php', function (result) {
      resolve(result);
    });
  });
}
function info(data) {
  return new Promise(function (resolve, reject) {
    $.get('/info.php', function (result) {
      resolve(result);
    });
  });
}
login().then(function (data) {
  console.log('处理login');
  //把login异步处理获取的数据,传入到下一个处理中。
  return user(data);
}).then(function (data) {
  console.log('处理user');
  //把user异步处理获取的数据,传入到下一个处理中。
  return info(data);
}).then(function (data) {
  console.log('处理info');
});

这样修改后,回调地狱层层嵌套的结构就变的清晰多了。上述代码是伪代码。

Promise对象还有一个catch方法,用于捕获错误,该方法与 then(null, onRejected) 等同,是一个语法糖。

let p = function () {
  return new Promise(function (resolve, reject) {
    resolve('开始');
  });
};
p().then(function (data) {
  console.log('1');
  return new Promise(function (resolve, reject) {
    reject('错误1');
  });
}).then(function (data) {
  console.log('2');
  return new Promise(function (resolve, reject) {
    reject('错误2');
  });
}).then(function (data) {
  console.log('3');
  return new Promise(function (resolve, reject) {
    reject('错误3');
  });
}).catch(function (reason) {
  console.log(reason);
});

注意,一旦操作中有错误发生,则会进入到catch中,后面的操作将不再执行。

Promise对象内部自带了try catch,当代码运行时错误,会自动以错误对象为值reject,并最终被catch捕获。

let p = function () {
  return new Promise(function (resolve, reject) {
    resolve('开始');
  });
};
p().then(function (data) {
  //注意这里打印了一个未定义的变量
  console.log(a);
}).catch(function (reason) {
  //这里会捕获到错误
  console.log('rejected');
  console.log(reason);
});

Promise还提供了,all(),race(),reject(),resolve()等在构造函数上的方法,调用这些方法并不需要实例化对象。

all()方法,可以让我们并行的执行异步操作,直到所有操作完成了,才执行回调。

function fn1() {
  return new Promise(function (resolve, reject) {
    setTimeout(function () {
      resolve('fn1');
    }, 1000);
  });
}
function fn2() {
  return new Promise(function (resolve, reject) {
    setTimeout(function () {
      resolve('fn2');
    }, 2000);
  });
}
function fn3() {
  return new Promise(function (resolve, reject) {
    setTimeout(function () {
      resolve('fn3');
    }, 3000);
  });
}
//all会等待所有操作完成,会把所有操作的结果放到一个数组中,传给then。
Promise.all([fn1(), fn2(), fn3()]).then(function (data) {
  console.log(data);
});

race()方法是谁先处理完,就以谁为准,把最先处理完的结果传给then。

function fn1() {
  return new Promise(function (resolve, reject) {
    setTimeout(function () {
      resolve('fn1');
    }, 1000);
  });
}
function fn2() {
  return new Promise(function (resolve, reject) {
    setTimeout(function () {
      resolve('fn2');
    }, 2000);
  });
}
function fn3() {
  return new Promise(function (resolve, reject) {
    setTimeout(function () {
      resolve('fn3');
    }, 3000);
  });
}
//race是以谁先处理完,就以谁为准,fn1最先处理完,那fn1的结果会传给then
//注意这里fn2和fn3还是会执行,不过不会进入then了
Promise.race([fn1(), fn2(), fn3()]).then(function (data) {
  console.log(data);
});

reject()方法,返回一个带有拒绝原因reason参数的Promise对象。

// Promise.reject('错误')
// 等同于
// new Promise(function(resolve, reject) {
//   reject('错误');
// });
let p = Promise.reject('错误');
p.then(function (data) {
}).catch(function (reason) {
  console.log(reason);
});

resolve()方法,根据传入的值返回一个Promise对象。

//如果传入的参数是普通值,则返回一个新Promise对象,并以该值resolve
let p1 = Promise.resolve('OK');
p1.then(function (data) {
  console.log(data);
});
//如果传入的参数是一个Promise对象,则原封不动的返回该Promise对象
let obj = new Promise(function (resolve, reject) {
  resolve('我是Promise对象');
});
let p2 = Promise.resolve(obj);
p2.then(function (data) {
  console.log(data);
  console.log(p2 === obj);
});
//如果传入的参数是一个thenable对象(带有then方法),
//会转换成Promise对象,并执行thenable对象的then方法
let then = {
  then(resolve, reject) {
    resolve('我是thenable对象');
  }
}
let p3 = Promise.resolve(then);
p3.then(function (data) {
  console.log(data);
});
//如果什么参数都不传入,则返回状态为resolved的Promise对象
let p4 = Promise.resolve();
p4.then(function (data) {
  console.log(data);
}).catch(function (reason) {
  console.log(reason);
});

感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具:http://tools.3water.com/code/HtmlJsRun测试上述代码运行效果。

更多关于JavaScript相关内容可查看本站专题:《JavaScript操作DOM技巧总结》、《JavaScript页面元素操作技巧总结》、《JavaScript事件相关操作与技巧大全》、《JavaScript查找算法技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript错误与调试技巧总结》

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
JavaScript初学者应注意的七个细节小结
Jan 30 Javascript
ajax java 实现自动完成功能
Dec 19 Javascript
JS中window.open全屏命令解析及使用示例
Dec 11 Javascript
二叉树的非递归后序遍历算法实例详解
Feb 07 Javascript
文本域光标操作的jQuery扩展分享
Mar 10 Javascript
通过$(this)使用jQuery包装后的方法或属性
May 18 Javascript
node.js中的fs.realpath方法使用说明
Dec 16 Javascript
浅谈Node.js:Buffer模块
Dec 05 Javascript
JavaScript反弹动画效果的实现代码
Jul 13 Javascript
JavaScript选择排序算法原理与实现方法示例
Aug 06 Javascript
基于Layui自定义模块的使用方法详解
Sep 14 Javascript
vuex页面刷新导致数据丢失的解决方案
Dec 10 Vue.js
React中获取数据的3种方法及优缺点
Feb 18 #Javascript
JavaScript canvas绘制渐变颜色的矩形
Feb 18 #Javascript
JavaScript canvas绘制折线图
Feb 18 #Javascript
node+multer实现图片上传的示例代码
Feb 18 #Javascript
JavaScript canvas绘制圆弧与圆形
Feb 18 #Javascript
javascript中的with语句学习笔记及用法
Feb 17 #Javascript
JS实现百度搜索框关键字推荐
Feb 17 #Javascript
You might like
php+dbfile开发小型留言本
2006/10/09 PHP
Jquery css函数用法(判断标签是否拥有某属性)
2011/05/28 Javascript
百度UEditor编辑器如何关闭抓取远程图片功能
2015/03/03 Javascript
关于JavaScript数组你所不知道的3件事
2016/08/24 Javascript
JS实现title标题栏文字不间断滚动显示效果
2016/09/07 Javascript
JS实现页面打印(整体、局部)
2017/08/18 Javascript
JavaScript 自定义事件之我见
2017/09/25 Javascript
jQuery基于闭包实现的显示与隐藏div功能示例
2018/06/09 jQuery
深入理解vue-class-component源码阅读
2019/02/18 Javascript
layui: layer.open加载窗体时出现遮罩层的解决方法
2019/09/26 Javascript
关于引入vue.js 文件的知识点总结
2020/01/28 Javascript
Python使用matplotlib绘制动画的方法
2015/05/20 Python
Python解惑之整数比较详解
2017/04/24 Python
Python json模块dumps、loads操作示例
2018/09/06 Python
解决Pycharm下面出现No R interpreter defined的问题
2018/10/29 Python
Django REST framework 视图和路由详解
2019/07/19 Python
Django自定义用户表+自定义admin后台中的字段实例
2019/11/18 Python
Python 自由定制表格的实现示例
2020/03/20 Python
CSS超出文本指定宽度用省略号代替和文本不换行
2016/05/05 HTML / CSS
Html5移动端弹幕动画实现示例代码
2018/08/27 HTML / CSS
PUMA官方商城:世界领先的运动品牌之一
2016/11/16 全球购物
中国一家综合的外贸B2C电子商务网站:DealeXtreme(DX)
2020/03/10 全球购物
在weblogic中发布ejb需涉及到哪些配置文件
2012/01/17 面试题
会计人员岗位职责
2014/03/19 职场文书
法制宣传标语集锦
2014/06/25 职场文书
英语自我介绍演讲稿
2014/09/01 职场文书
2015年学校信息技术工作总结
2015/05/25 职场文书
初中运动会前导词
2015/07/20 职场文书
大学入学感言
2015/08/01 职场文书
幼儿园老师新年寄语
2015/08/17 职场文书
创业计划书之零食店(进口)
2019/09/24 职场文书
导游词之无锡东林书院
2019/12/11 职场文书
JS代码编译器Monaco使用方法
2021/06/11 Javascript
SpringBoot生成License的实现示例
2021/06/16 Java/Android
详解Python+OpenCV进行基础的图像操作
2022/02/15 Python
简单聊聊Golang中defer预计算参数
2022/03/25 Golang