保姆级！Promise 10分钟 入门

Posted 2022-12-06 小小码农，可笑可笑

ES6为什么推出Promise

Promise 是ES6新增的引用类型，让我们的异步逻辑代码更加优雅。 

异步就相当于你会了影分身，本来你只能同一时间做一个事情，但是当你有了分身之后，你可以和他同一时间做不同的事情。

所以，异步增加了我们事情完成的效率，这也就是我们常说的避免进程等待一个长时间的线程操作，同时执行，减少耗时，增加性能。

异步是javascript的基础，之前的异步实现并不理想。以前，想要表明一个异步操作的完成，只能通过回调函数来完成，当异步当中还有异步，如此反复多次，就是常说的回调噩梦

但是当有了Promise就不一样了，我们不需要回调嵌套，逻辑清晰、代码优雅的完成了异步操作。

我们来对比下吧。以嵌套三次为例。不需要看懂代码，只需要对比下哪种更优雅。

以前异步嵌套

//定义一个异步函数
function double(value, success, failure) 
  setTimeout(() => 
    try 
      if(typeof value === 'number')
        success(2 * value);
      else
        throw '参数必须是数字';
      
     catch (error) 
      failure(error);
    
  , 100);


//注意这里。这是成功回调。z用到了y,y用到了x，所以需要嵌套3层
const successCallback = (x)=>
  double(x,(y)=>
    double(y,(z)=>
      console.log('success:',z);
    )
  )

//失败回调
const failureCallback = (e)=>
  console.log('failure',e);

double(3, successCallback, failureCallback);

有了Promise的异步多层回调 

//定义一个工厂方法
function doublePromise(value)
  let p1 = new Promise((resolve,reject)=>
    if(typeof value === 'number')
      setTimeout(()=>
        try 
          resolve(2*value);
          console.log('success:',2*value);
         catch (error) 
            reject(error);
            console.log('failure',error);
        
       , 100);
    else
      throw '参数必须是数字';
    
  )
  return p1


//promise将异步串行化，避免了回调噩梦
doublePromise(3).then((value1)=>
  console.log(typeof value1)
  return doublePromise(value1)
).then((value2)=>
  console.log(value2)
  return doublePromise(value2)
)

目前还是三层的，越多的话就越发现Promise的优雅与简洁。

Promise（期约）

基本表现形式

new Promise((resolve,reject)=>

)

 

Promise的三种状态：

• 待定（pending）

new Promise((resolve,reject)=>

)//Promise <pending>

未定义其他状态，且未改变其状态时，期约为pending状态

 

• 兑现（fulfilled，也可称作解决，resolved）

new Promise((resolve,reject)=>
   resolve()
)//Promise <fulfilled>: undefined

• 拒绝（rejected）

new Promise((resolve,reject)=>
   reject()
)//Promise <rejected>: undefined

• 状态变更规则

注意！Promise从待定状态改变为兑现或拒绝，只能改变一次。

let p = new Promise((resolve,reject)=>
    resolve();
    reject();
);
console.log('期约状态：',p)
//或许你以为是期约状态：Promise<rejected>,实际上是期约状态：Promise<resolved>

Promise初始状态并非一定是pedding（待定）状态：

let p1 = new Promise((resove,reject) => resove());
let p2 = Promise.resove();
//p1 和 p2两个都是解决期约

解决期约Promise.resolve()

解决期约(Promise.resolve())可包装任何非期约值，就算是错误对象，并只接受一个参数值！若参数为期约，则返回参数参数期约，可将外层期约看作个空包装。可以说Promise.resolve()是一个幂等方法。此幂等性还会保留期约传入的状态。类似我们学过的函数方程：f(f(x)) = f(x)

代码：

let p3 = Promise.resolve(1);
let p4 = Promise.resolve(p3);
console.log(p3===p4); //true

拒绝期约（Promise.reject()）

拒绝期约（Promise.reject()），会实例化一个拒绝期约，并抛出一个异步错误。该错误不能通过try/catch捕获，只能通过拒绝处理程序捕获。参数如果传入一个期约，则这个期约将成为拒绝的理由。

举个例子，你跟我表白，我拒绝你，并告诉你，因为你是个男的我也是个男的，所以我们不能pp，所以我们不能在一起。

代码：

let p = Promise.reject(Promise.resolve());
console.log('p:', p);
// p: Promise  <state>: "rejected", <reason>: Promise  "fulfilled"  

Promise的实例方法

三个方法，一个处理方法，一个拒绝处理方法。一个无论拒绝还是处理都会执行的方法。

你跟我表白，我得告诉你我接受不接受吧，虽然很多渣男渣女吊着你，但是程序不会吊着你，除非没网，那个时候就是渣程序。还有无论接受不接受，不影响我找你借钱吧

处理方法then()

可以传两个参数，Promise.prototype.then(onResoved,onRejected)。返回值为一个新Promise对象

let p = new Promise((resolve,reject)=>
    resolve('我接受你啦')
);
p.then(()=>
    console.log('我同意我同意，你好帅哇，想给你大马猴')
)

拒绝处理方法catch()

类似一个语法糖，等同于Promise.prototype.then(null,onRejected)。返回值为一个新Promise对象

let p = new Promise((resolve,reject)=>
    reject('不行！')
);
p.catch(()=>
    console.log('你太丑了')
)

兑现或拒绝都会执行的方法finally() 

返回值为一个新Promise对象

let p = new Promise((resolve,reject)=>
    reject('不行！')
);
p.finally(()=>
    console.log('不过你能借我点钱嘛？')
)

入门就到这里，下一篇深入。