Promise详解(resolve,reject,catch)
一:何为Promise?
Promise其实是一个构造函数,它有resolve,reject,race等静态方法;它的原型(prototype)上有then,catch方法,因此只要作为Promise的实例,都可以共享并调用Promise.prototype上面的方法(then,catch),接下来我们试着使用一
下Promise。
二:Promise的使用
首先我们来看一下Promise的使用语法:
var p = new Promise(function (resolve, reject) {var timer = setTimeout(function () {console.log('执行操作1'); // 执行操作1resolve('这是resolve中的成功数据');}, 1000);});p.then(function (data) { //此处的data是resolve中的数据console.log(data); // 这是resolve中的成功数据 ---(resolve中的数据)console.log('这是成功操作');});
在实例化Promise时需要传入一个函数excutor作为参数,并且在Promise构造函数执行时同步执行。废话不多说,先看一个简单的实例:
var p = new Promise(function(resolve,reject){var timer = setTimeout(function(){console.log('执行操作1');},1000);});
我们可以看到1s后在控制台输出相应的结果,这就说明在实例化过程中,作为参数的excutor函数也会执行。
从上面的实例中我们看到,excutor函数还有两个参数resolve和reject,其实这两个参数也是函数,在excutor执行时被调用,下面我们具体来谈谈resolve和reject的用法。
三:resolve和reject的具体用法
1.先来说说resolve的用法
首先我们来看看Promise的几种状态:
pending: 初始状态,成功或失败状态。
fulfilled: 意味着操作成功完成。
rejected: 意味着操作失败。
当我们在excutor函数中调用resolve方法时,Promise的状态就变成fulfilled,即操作成功状态,还记得上面Promise.prototype上面的then和catch方法吗?当Promise状态为fullfilled状态时执行then方法里的操作,注意了,then方法里面有两个参数onfulfilled(Promise为fulfilled状态时执行) 和onrejected(Promise为rejected状态时执行),步骤如下:
1.实例化Promise(new Promise(function(resolve,reject)))
2.用Promise的实例调用then方法。
具体来看下面的例子:
var p = new Promise(function (resolve, reject) {var timer = setTimeout(function () {console.log('执行操作1'); // 执行操作1resolve('这是resolve中的成功数据');}, 1000);});p.then(function (data) { //此处的data是resolve中的数据console.log(data); // 这是resolve中的成功数据 ---(resolve中的数据)console.log('这是成功操作');});
简单的理解就是调用resolve方法,Promise变为操作成功状态(fulfilled),执行then方法里面onfulfilled里的操作。其实then里面的函数就是我们平时所说的回调函数,只不过在这里只是把它分离出来而已。我们可以看到控制台上的输出结果如下所示:
执行操作1
lianxi.html:74 这是resolve中数据
lianxi.html:76 这是成功操作
2.reject的用法
看了上面的实例,我相信应该也很容易理解reject方法了,就是调用reject方法后,Promise状态变为rejected,即操作失败状态,此时执行then方法里面onrejected操作,上面我们提到了then方法有两个参数,一种是Promise状态为fulfilled时执行(onfullfilled),一种是Promise状态为rejected时执行(onrejected),其实就是类似于jquery里的hover方法里面的两个参数一样,来看看下面的例子:
var p = new Promise(function(resolve, reject){var flag = false;if(!flag){resolve('这是resolve中的数据')}else{reject('这是reject中的数据')}
})
p.then(function(data){ // data中是resolve数据,状态在fulfilled时执行;console.log(data);
}, function(reason){ // reason是reject中的数据,在reject状态时才会执行console.log(reason);})
三:catch方法
我们注意到除了then方法外,Promise原型上还有另外一个叫catch的方法,那么这个方法的作用是什么呢?其实跟then方法中的第二个参数一样,就是在Promise状态为rejected时执行,then方法捕捉到Promise的状态为rejected,就执行catch方法里面的操作,下面用catch方法改写上面reject用法里面的例子,如下所示:
var p = new Promise(function(resolve, reject){var flag = false;if(!flag){resolve('这是resolve中的数据')}else{reject('这是reject中的数据')}
})
p.then(function(data){ // data中是resolve数据,状态在fulfilled时执行;console.log(data);
}).catch(function(reason){ reason是reject中的数据,在reject状态时才会执行console.log(reason);
})
执行结果和上面reject用法的例子一样。
四.为何用Promise
首先我们来看这样一个例子,取4个定时器,设置延迟时间都为1s,然后每隔1s依次在控制台输出‘I’‘LOVE’‘YOU’的字样。代码如下:
setTimeout(function(){console.log('I');setTimeout(function(){console.log('love');setTimeout(function(){console.log('you');},2000)}, 2000)}, 2000)
发现什么问题没有?是不是有点感觉回调函数的嵌套有点多,如果有更多的回调函数呢?是不是使代码的可读性和可维护性都大大降低了呢(回调地狱?),这时如果我们使用Promise去实现这个效果,虽然可能代码不会减少,甚至更多,但是却大大增强了其可读性和可维护性。具体看下面例子
function getStr1(){return new Promise(function(resolve, reject){setTimeout(function(){resolve('I')}, 2000)})}function getStr2(){return new Promise(function(resolve, reject){setTimeout(function(){resolve('Iove')}, 2000)})}function getStr3(){return new Promise(function(resolve, reject){setTimeout(function(){resolve('you')}, 2000)})}getStr1().then(function(data){console.log(data);return getStr2();}).then(function(data){console.log(data);return getStr3();}).then(function(data){console.log(data);})
执行效果跟上面一样,在这个例子中,将得到Promise实例的过程封装成一个函数(getStr1,getStr2,getStr3,getStr4)并返回一个Promise实例,再用实例去调用相应的then方法,在每个then方法中通过return得到下一级的Promise实例,比如在第一个Promise实例(getStr1())then方法中,通过return返回下一个Promise对象(getStr2()),然后再去调用then方法执行里面的操作,再返回下一个Promise对象(这里是getStr3()),这样一级一级下去实现了链式调用,虽然代码量增加了,但比起前面的层层嵌套,显然这种方式使得代码更易读更易维护。
本文对Promise的介绍就到这里,欢迎大家指正里面的错误和不准确的地方.
转载自:https://www.cnblogs.com/homeStrong/p/8231889.html
Promise详解(resolve,reject,catch)相关推荐
- JS 的 Promise详解
@[TOC](JS 的 Promise详解)欧诺个鱼 1.概念 ES 6 开始支持 Promise. Promise 对象用于一个异步操作的最终完成(包括成功和失败)及结果值的表示.简而言之,就是处理 ...
- 关于Promise详解
异步回调 回调地狱 在需要多个操作的时候,会导致多个回调函数嵌套,导致代码不够直观,就是常说的回调地狱 并行结果 如果几个异步操作之间并没有前后顺序之分,但需要等多个异步操作都完成后才能执行后续的任务 ...
- promise存在的意义分析resolve reject catch
简介 new Promise(function(resolve,reject){}); 状态 pending: 初始状态,成功或失败状态. fulfilled: 意味着操作成功完成.对应resolve ...
- angular $q promise详解
前言 通过本文,你大概能清楚angular promise是个啥,$q又是个啥,以及怎么用它.这里咱们先灌输下promise的思想. 下面写的全是废话,一些看着高逼格其实没什么大作用的概念,想知道$q ...
- promise 详解
Promise 作用:主要是来解决Ajax的异步问题 传统方式:回调函数来解决异步问题,类似如下问题 ajax(url, {// 成功后回调ajax(url, {// 成功之后再回调ajax(url, ...
- ES6中的Promise详解
Promise 在 JavaScript 中很早就有各种的开源实现,ES6 将其纳入了官方标准,提供了原生 api 支持,使用更加便捷. 定义 Promise 是一个对象,它用来标识 JavaScri ...
- ES6 中 Promise 详解
博客地址:https://ainyi.com/16 Promise,简单说就是一个容器,里面保存着某个未来才会结束的事件(通常是一个异步操作)的结果.从语法上说,Promise 是一个对象,从它可以获 ...
- Promise详解(一) ----基础用法
什么是Promise Promise是由社区最早提出并实现的,后加入到es6规范中.为更好处理javascript异步问题,用于解决其多次异步回掉嵌套问题.下面先尝试下promise的基础用法吧. 创 ...
- Promise详解,相信你看完我这篇文章简单的Promise使用方式基本上就全会了
Promise 对象 认识Promise对象 语法 new Promise((resolve, reject)=>{resolve();// reject(); }).then(()=>{ ...
- javaScript中Promise详解
ES2015正式发布(也就是ES6,ES6是它的乳名),其中Promise被列为正式规范.作为ES6中最重要的特性之一,我们有必要掌握并理解透彻.本文将由浅到深,讲解Promise的基本概念与使用方法 ...
最新文章
- oracle数据库数据导入导出步骤(入门)
- linux 定时任务
- 如何获取握手包_白话详解TCP的三次握手到底做了些什么
- 各hadoop安装的收集
- 下载的oracle如何解压,深度概述Ubuntu oracle下载解压
- oracle 本年1月1号 yy,ORACLE 日期函数
- 客户关系管理系统-帮管客CRM客户管理系统 v3.0.1
- csds原装的Markdown文档
- Bailian2752 字符串数组排序问题【排序】
- 起名源码PHP(宝宝取名源码)
- Cocoa 获取一个独特的电脑硬件ID (A unique hardware id)
- FaceBook 遭遇有史以来全球最大宕机
- 英语六级-day10
- Springboot 静态资源路径配置 实例介绍
- Linux 中task_struck
- 英文格式的时间转换为 yyyy-MM-dd 格式
- v-model是什么?怎么使用?
- win7原版安装版系统
- c 语言printf输出,位数不够补0
- R语言学习丨散点图怎么画?绘图基本知识与常用函数