目录

Promise是什么

promise是一个对象,是 JavaScript 的异步操作解决方案,为异步操作提供统一接口。它起到代理作用(proxy),充当异步操作与回调函数之间的中介,使得异步操作具备同步操作的接口。Promise 可以让异步操作写起来,就像在写同步操作的流程,而不必一层层地嵌套回调函数。

一、Promise概念

promise是一个对象,对象和函数的区别就是对象可以保存状态,函数不可以(闭包除外); 并未剥夺函数return的能力,因此无需层层传递callback,进行回调获取数据;代码风格,容易理解,便于维护;多个异步等待合并便于解决。

Promise 对象是 JavaScript 的异步操作解决方案,为异步操作提供统一接口。它起到代理作用(proxy),充当异步操作与回调函数之间的中介,使得异步操作具备同步操作的接口。Promise 可以让异步操作写起来,就像在写同步操作的流程,而不必一层层地嵌套回调函数。

二、promise对象的特点

1、对象的状态不受外界影响

promise对象有3种状态:

  • pending:等待状态,比如正在进行网络请求,或者定时器没有到时间
  • fulfill:满足状态,当我们主动回调了resolve时,就处于该状态,并且会回调.then()
  • reject:拒绝状态,当我们主动回调了reject时,就处于该状态,并且会回调.catch()

只有异步操作的结果可以决定当前是哪种状态,任何其他操作无法改变这种状态。

2、Promise对象的状态一旦改变,就不会再变

任何时候都可以得到这个结果。Promise对象的状态改变,只有两种可能:从pending变为fulfilled,从pending变为rejected。原因是这两种情况状态就凝固,不会再变了,并一直保持这种结果,这时就成为resolved(已定型)。如果改变已经发生了,再对Promise对象添加回调函数,也会立即得到这个结果。

这与事件(Event)完全不同。事件的特点是,如果错过了再去监听,将不会得到结果。有了Promise对象,就可以将异步操作以同步操作的流程表达出来,避免使用层层嵌套的回调函数。此外,Promise对象提供统一的接口,使得异步操作更加容易。

三、Promise构造函数的方法

1、then方法

promise的then方法带有以下三个参数:成功回调,失败回调,前进回调,一般情况下只需要实现名列前茅个,后面是可选的。Promise中最为重要的是状态,通过then的状态传递可以实现回调函数链式操作的实现。

代码:


<script src="https://unpkg.com/vue@next"></script>
<script type="text/javascript">
greet().then(v=>{
console.log(v);//*
})
function greet(){
var promise = new Promise(function(resolve,reject){
var greet = "hello  world";
           resolve(greet);
       });
return promise;
   }
var p = greet().then(v=>{
console.log(v);
   })
console.log(p);
</script>

这里promise的状态是pending,输出hello world。

2、reject用法

reject的作用就是把Promise的状态从pending置为rejected,这样在then中就能捕捉到reject的回调函数。

代码:

<script src="https://unpkg.com/vue@next"></script>
<script type="text/javascript">
function judgeNumber(num){
var promise1 = new Promise(function(resolve,reject){
           num =5;
if(num<5){
               resolve("num小于5,值为:"+num);
           }else{
               reject("num不小于5,值为:"+num);
           }
       });
return promise1;
   }

judgeNumber().then(
function(message){
console.log(message);
       },
function(message){
console.log(message);
       }
   )
</script>

then后包含有两个方法,前一个执行resolve回调的参数,后一个执行reject回调的参数。

3、catch方法

代码:

<script src="https://unpkg.com/vue@next"></script>
<script type="text/javascript">
function judgeNumber(num){
var promise1 = new Promise(function(resolve,reject){
           num =5;
if(num<5){
               resolve("num小于5,值为:"+num);
           }else{
               reject("num不小于5,值为:"+num);
           }
       });
return promise1;
   }

judgeNumber().then(
function(message){
console.log(message);
       },
function(message){
console.log(message);
       }
   )
</script>

这个时候catch执行的是和reject一样的,也就是说如果Promise的状态变为reject时,会被catch发现到,需要注意的是如果前面设置了reject方法的回调函数,则catch不会捕捉到状态变为reject的情况。

延伸阅读1:promise对象缺点

  • 无法取消,一旦新建立即执行,无法中途取消
  • 如果不设置回调函数,内部抛出错误不会反映到外部
  • 处于pending状态无法判断处于哪个阶段,是刚开始还是已经完成