当前位置: 代码迷 >> 综合 >> Promise初步详解(resolve,reject,catch)
  详细解决方案

Promise初步详解(resolve,reject,catch)

热度:89   发布时间:2023-10-27 14:14:33.0

一:何为Promise?

为了直观一点,首先我们采用console.dir(Promise)看一下它的结构组成。

从上面的图片中我们可以到,Promise其实是一个构造函数,它有resolve,reject,race等静态方法;它的原型(prototype)上有then,catch方法,因此只要作为Promise的实例,都可以共享并调用Promise.prototype上面的方法(then,catch),接下来我们试着使用一下Promise。

二:Promise的使用


首先我们来看一下Promise的使用语法:

new Promise(function(resolve,reject){}/*excutor*/);

在实例化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');resolve('这是数据1');}, 1000);});p.then(function (data) {console.log(data);console.log('这是成功操作');});

简单的理解就是调用resolve方法Promise变为操作成功状态(fulfilled),执行then方法里面onfulfilled里的操作。其实then里面的函数就是我们平时所说的回调函数,只不过在这里只是把它分离出来而已。我们可以看到控制台上的输出结果如下所示:

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('这是数据2');}else{reject('这是数据2');}});p.then(function(data){//状态为fulfilled时执行console.log(data);console.log('这是成功操作');},function(reason){ //状态为rejected时执行console.log(reason);console.log('这是失败的操作');});

我们可以看到输出结果:

三: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('这是数据2');}else{reject('这是数据2');}});p.then(function(data){console.log(data);console.log('这是成功操作');}).catch(function(reason){console.log(reason);console.log('这是失败的操作');});

执行结果和上面reject用法的例子一样。

为什么会有promise,他的作用是什么?

promise主要是为了解决js中多个异步回调难以维护和控制的问题.

  相关解决方案