对js中的Primise自己的理解

随手记

对于js中的Primise自己的理解记录成笔记。
JavaScript语言的执行环境是“单线程”，所谓单线程，就是一次只能够执行一个任务，如果有多个任务的话就要排队，前面一个任务完成后才可以继续下一个任务.

前言

JavaScript语言的执行环境是“单线程”，所谓单线程，就是一次只能够执行一个任务，如果有多个任务的话就要排队，前面一个任务完成后才可以继续下一个任务.
这种“单线程”的好处就是实现起来比较简单，容易操作；坏处就是容易造成阻塞，因为队列中如果有一个任务耗时比较长，那么后面的任务都无法快速执行，或导致页面卡在某个状态上，给用户的体验很差。
一直以来，JavaScript处理异步都是以callback的方式，js中的Promise规范因而顺势而出。

状态

Promise有以下几种状态:

  • pending: 初始状态, 初始状态，未完成或拒绝。
  • fulfilled: 意味着操作成功完成。
  • rejected: 意味着操作失败。

API

  • Promise.resolve() 执行成功
  • Promise.reject() 执行失败
  • Promise.prototype.then() 递延处理
  • Promise.prototype.catch() 异常
  • Promise.all() 所有的完成 Promise.all方法常被用于处理多个promise对象的状态集合
then()

then() 方法返回一个Promise。它最多需要有两个参数：Promise的成功和失败情况的回调函数

catch()

catch() 方法捕获Promise执行时出现的错误

特性

  1. 立即执行性

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    let p=new Promise(function(resolve,reject){  
    	console.log("create new promise");  
    	resolve("success");  
    });  

    console.log("after new  promise");  
           
    p.then(function(value){  
    	console.log(value);  
    });  
    //输出：
      //create new promise  
      //after new  promise  
      //success

  2. 状态不可逆性、链式调用

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
      var p = new Promise(function(resolve, reject){  
          resolve(1);  
        });  
        p.then(function(value){               //第一个then  
          console.log(value);  
          return value*2;  
        }).then(function(value){              //第二个then  
          console.log(value);  
        }).then(function(value){              //第三个then  
          console.log(value);  
          return Promise.resolve('resolve');   
        }).then(function(value){              //第四个then  
          console.log(value);  
          return Promise.reject('reject');  
        }).then(function(value){              //第五个then  
          console.log('resolve: '+ value);  
        }, function(err){  
          console.log('reject: ' + err);  
        })  
    //输出：
        //1  
        //2  
        //undefined  
        //resolve  
        //reject: reject

  3. then() 回调异步性

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
       var p = new Promise(function(resolve, reject){  
          resolve("success");  
        });  
          
        p.then(function(value){  
          console.log(value);  
        });  
          
        console.log("first");  
    //输出：
        //"first"  
        //"success"

dome

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
//1.先新建一个promise
let p = new Promise((resolve,reject)=>{
//模拟异步操作
       setTimeout(()=>{
            resolve('success');
            reject('error');
        },5000)

})
//2.then()
//res即为 resolve回调的‘success’ ; err即为 reject回调的‘error’
p.then(res=>{
    console.log(res);
}).catch(err=>{
    console.log(err);
})