深度理解Promise--Promise的特点和方法详解

什么是promise？

Promise（承诺），在程序中的意思就是承诺我过一段时间（通常是一个异步操作）后会给你一个结果，是异步编程的一种解决方案。从语法上说，原生Promise 是一个对象，从它可以获取异步操作的消息。

promise的特点

对象的状态不受外界影响。

promise有三种状态 pending（进行中） fulfilled（已成功） rejected（已失败），只有异步操作的结果，才可以决定当前是哪一种状态，任何其他操作都无法改变这个状态。

一旦从等待状态变成为其他状态就永远不能更改状态了。

promise只有两种状态改变：
pending（进行中）--> fulfilled（已成功）；
pending（进行中）--> rejected（已失败）。
当状态改变结束时称为resolve（已固定），一旦状态变为 resolved 后，就不能再次改变为Fulfilled。

一旦新建Promise就会立即执行，无法中途取消。
如果不设置回调函数callback，Promise内部抛出的错误，就不会反应到外部。
当处于pending状态时，无法得知目前进展到哪一个阶段（刚刚开始还是即将完成）。

promise实例操作

在这里插入图片描述

首先创造了一个Promise实例

let promise=new Promsie(function(resolve,rejec){
    if(/*异步执行成功*/){
        resolve(value);
    }else{
        reject(error);
    }
})
promise.then(function(){
    //回调执行成功之后的操作
},function(){
    //回调执行失败之后的操作，可选
});

Promise构造函数接受一个函数作为参数，该函数的两个参数分别是resolve和reject。它们是两个函数，由 JavaScript 引擎提供。当异步操作成功时（pending--fulfilled），调用resolve（value）函数把操作结果当成参数传出，当异步操作成功时（pending--rejected）调用 reject(error)函数把错误返回。Promise实例生成以后，用then方法分别指定resolved状态和rejected状态的回调函数。

下面看一下构造函数原型的方法

Promise.prototype.then()

Promise.prototype.then()作用是为 Promise 实例添加状态改变时的回调函数。接受两个回调函数作为参数。第一个回调函数是Promise对象的状态变为resolved时调用，第二个回调函数是Promise对象的状态变为rejected时调用。其中，第二个函数是可选的，不一定要提供。
而Promise.prototype.then()返回的是另一个Promise对象，后面还可以接着调用then方法。

Promise.prototype.catch()

Promise.prototype.catch()则是.then(null, rejection)或.then(undefined, rejection)的别名，用于指定发生错误时的回调函数。 Promise 对象的错误具有“冒泡”性质，会一直向后传递，直到被捕获为止。也就是说，错误总是会被下一个catch语句捕获。
Promise.catch()方法返回的也是一个 Promise 对象，因此后面还可以接着调用then方法。

上述代码也可以理解成这样：

getJSON('/posts.json').then(function(posts) {
      // ...
}).catch(function(error) {
  // 处理 getJSON 和 前一个回调函数运行时发生的错误
  console.log('发生错误！', error);
});

Promise.prototype.finally()

finally方法用于指定不管 Promise 对象最后状态如何，都会执行的回调函数。该方法是 ES2018 引入标准的。
finally方法的回调函数不接受任何参数，这意味着没有办法知道，前面的 Promise 状态到底是fulfilled还是rejected。这表明，finally方法里面的操作，应该是与状态无关的，不依赖于 Promise 的执行结果。

finally本质上是then方法的特例。

promise.then(()=>{}).catch(()=>{}).finally(() => {
      // 操作
});
// 等同于
promise.then(result => {
        // 操作
    return result;
}).catch( error => {
        // 操作
    throw error;
});

promise的链式调用

由于 .then每次调用返回的都是一个新的Promise实例，如果then中返回的是一个结果的话会把这个结果传递下一次then中的成功回调，所以可以链式调用该实例。
如果then中出现异常,会走下一个then的失败回调，catch 会捕获到没有捕获的异常。

在 then中使用了return，那么 return 的值会被Promise.resolve() 包装，then中也可以不传递参数，如果不传递会透到下一个then中。

Promise.resolve(1).then(res => {
        console.log(res)
        return 2 //包装成 Promise.resolve(2)
}).catch(err => 3).then().then(res => console.log(res))

promise自身API

Promise.resolve()

将现有的对象转换（包装）成 promise对象。四种参数类型：

不带参数传递 --- 返回一个新的状态为resolve的promise对象。
```
let p = Priomse.resolve()   // p就是promise
```
参数是一个 Promise 实例--- 返回当前的promise实例
参数是带then方法的对象
```
let data = {
    then:function(resolve,reject){
        resovle('带then方法的对象')
    }
}
Promise.resolve(data).thne((res)=> console.log(res)) // '带then方法的对象'
```
返回一个新的promise，并直接执行then的方法，promise对象的状态就变为resolved，从而立即执行最后那个then方法指定的回调函数，输出 '带then方法的对象'。
参数是非空，非then方法的对象，非proimse的
```
let p = Promise.resolve('foo')
// 等价于
let p = new Promise(resolve => resolve('foo'))
p.then(res=>console.log(res)) //'foo'
```
返回一个新的状态为resolve的promise对象，所以then回调函数会立即执行。Promise.resolve方法的参数，会同时传给回调函数。

Promise.reject()

参数为非then对象时-----Promise.reject(reason)方法也会返回一个新的 Promise 实例，该实例的状态为rejected

let p  =  Promise.reject('error')
// 等价于
let p = new Primose((resolve,reject)=>reject('出错了')})
//处理错误的回调
p.then((null,res)=>console.log(res)) //'出错了'

参数是带then方法的对象 ---返回的并不是then方法的回调函数，而是data对象本身

let data = {
    then:function(resolve,reject){
        reject('带then方法的对象出错了')
    }
}
Promise.resolve(data).thne((null,res)=> console.log(res)) // data 
//等同于
Promise.resolve(data).catch(res=> console.log(res)) // data

Promise.all()

该方法将多个promise实例，包装成一个新的promise实例。

    let p = Promise.all([p1,p2,p3])

参数不一定为数组，但必须为一个可迭代Iterator ，且返回的每个成员（p1,p2,p3）都是 Promise 实例，如果不是，就会先调用的Promise.resolve方法，将参数转为 Promise 实例，再进一步处理。

var p = Promise.all([1,2,3]);
var p2 = Promise.all([1,2,3, Promise.resolve(444)]);
var p3 = Promise.all([1,2,3, Promise.reject(555)]);
setTimeout(function() {
    console.log(p);// Promise { <state>: "fulfilled", <value>: Array[3] }
       console.log(p2); // Promise { <state>: "fulfilled", <value>: Array[4] }
    console.log(p3); // Promise { <state>: "rejected", <reason>: 555 }
});
p.then(function (posts) {
  // ..当有返回值的时候才会回调
}).catch(function(reason){
  // ...
});

当p1,p2,p3中得实例都改变成 fulfilled（已成功）时，此时p1、p2、p3的返回值组成一个数组，传递给p的回调函数。
当p1,p2,p3中得实例其中一项的改变成 rejected（已失败）时，p的状态就变成rejected，此时第一个被reject的实例的返回值，会传递给p的回调函数。
Promise.all()是异步解析,只有这当所有实例的状态都变成fulfilled，或者其中有一个变为rejected，才会调用Promise.all方法后面的回调函数then,catch方法。但是当且仅当传递的iterable为空时，Promise.all才会同步解析。
```
var p = Promise.all([]); 
console.log(p);//Promise { <state>: "fulfilled", <value>: Array[0] }
```
处理错误，常规情况下，当其中一个实例返回rejected，就会调用Promise.all的catch方法，返回第一个错误。但实际应用时，我们想让所有的实例不论成功或失败就可以返回参数组成数组，这时就可以调用实例自身的catch方法来规避这种情况。
```
const p1 = new Promise((resolve, reject) => {
  resolve('hello'); //resolved
}).then(result => result).catch(e => e);

const p2 = new Promise((resolve, reject) => {
  throw new Error('报错了');//rejected
}).then(result => result).catch(e => e);

Promise.all([p1, p2])
.then(result => console.log(result))// ["hello", Error: 报错了]
.catch(e => console.log(e));
```
p1会resolved，p2首先会rejected，但是p2有自己的catch方法，该方法返回的是一个新的 Promise 实例，p2指向的实际上是这个实例。该实例执行完catch方法后，也会变成resolved，导致Promise.all()方法参数里面的两个实例都会resolved，因此会调用then方法指定的回调函数，而不会调用catch方法指定的回调函数。

js原生实现Promise.all的原理

//在Promise类上添加一个all方法，接受一个传进来的promise数组
Promise.all = function (promiseArrs) { 
   return new Promise((resolve, reject) => { //返回一个新的Promise
    let arr = []; //定义一个空数组存放结果
    let i = 0;
    function handleData(index, data) { //处理数据函数
        arr[index] = data;
        i++;
        if (i === promiseArrs.length) { //当i等于传递的数组的长度时 
            resolve(arr); //执行resolve,并将结果放入
        }
    }
    for (let i = 0; i < promiseArrs.length; i++) { //循环遍历数组
        promiseArrs[i].then((data) => {
            handleData(i, data); //将结果和索引传入handleData函数
        }, reject)
    }
    })
}

如果说all体验不好，那我们也可以自己做一个some方法，表示全部失败才算失败

Promise.some = function (promiseArrs) {
  return new Promise((resolve, reject) => {
  let arr = []; //定义一个空数组存放结果
  let i = 0;
  function handleErr(index, err) { //处理错误函数
      arr[index] = err;
      i++;
      if (i === promiseArrs.length) { //当i等于传递的数组的长度时 
        reject(err); //执行reject,并将结果放入
      }
  }
  for (let i = 0; i < promiseArrs.length; i++) { //循环遍历数组
      promiseArrs[i].then(resolve, (e) => handleErr(i, e))
  }
  })
}

Promise.allSettled -- 兼容性不友好

该方法和promise.all类似，就是解决all方法在处理错误时的不合理而出现的。其参数接受一个Promise的数组, 返回一个新的Promise, 唯一与all的不同在于, 其不会进行短路, 也就是说当Promise全部处理完成后我们可以拿到每个Promise的状态, 而不管其是否处理成功。

和all类似，当自身实例有catch回调时，每个实例状态变为fulfilled

const p3 = new Promise((resolve, reject) => {
  resolve('hello'); //resolved
}).then(result => result).catch(e => e);

const p4 = new Promise((resolve, reject) => {
  throw new Error('报错了');//rejected
}).then(result => result).catch(e => e);

Promise.allSettled([p3, p4])
.then(result => console.log(result))
.catch(e => console.log(e));
//.then的log
//[{status: "fulfilled", value: "hello"},{status: "fulfilled", reason: Error: 报错了 at <anonymous>:6:10 at     new Promise (<anonymous>) at <anonymous>:5:13}]

没有catch接收错误，返回自身的状态和回调参数

const p5 = new Promise((resolve, reject) => {
  resolve('hello'); //resolved
}).then(result => result)

const p6 = new Promise((resolve, reject) => {
  throw new Error('报错了');//rejected
}).then(result => result)

Promise.allSettled([p5, p6])
.then(result => console.log(result))
.catch(e => console.log(e));
//.then的log
//[{status: "fulfilled", value: "hello"},{status: "rejected", reason: Error: 报错了 at <anonymous>:6:10 at     new Promise (<anonymous>) at <anonymous>:5:13}]

Promise.race()

该方法同样是将多个 Promise 实例，包装成一个新的 Promise 实例，其他特点和all很像，和all的区别在于：race方法好比是赛跑，几个实例一起跑，谁先到就成功了，就resolve谁，或者谁跑到中途摔了出现异常状况失败了，就reject谁，不论成功还是失败，就先捕获第一个完成的。

捕获第一个成功的实例回调函数

let p1 = Promise.resolve('1')
let p2 = Promise.resolve('2')
Promise.race([p1,p2]).then(res=>conseloe.log(res))// '1'

捕获第一个结果

let p1 = Promise.resolve("1");
  let p2 = Promise.reject("ERR2");
 Promise.race([p1,p2]).then(res=>conseloe.log(res)) //Promise {<resolved>: "1"}

捕获第一个错误

let p1 = Promise.reject("ERR1");
  let p2 = Promise.reject("ERR2");
 Promise.race([p1,p2]).catch(console.log) //Promise {<reject>: "ERR1"}

原生实现Promise.race()的设计原理

Promise._race = iterator  =>{
    return new Promise((resolve,reject)=>{
        iterator.forEach(item=>{
            Promise.resolve(item).then(resolve).catch(reject)
        })
    })
}

Promise.try-- 提案

在实际开发使用promise时，希望经过promise包装后的函数内部代码让同步函数同步执行，异步函数异步执行，并且让它们具有统一的 API
例：当同步函数被promise包装后的执行顺序改变。

let fn = () =>console.log('同步1');
Promise.resolve().then(fn)
console.log('同步2')
//log后
//'同步2'
//'同步1'

Promise.try的应用
该方法是用来模拟try的代码块的，就像promise.catch模拟的是catch代码块。

理解 try catch finally

 try catch是JavaScript的异常处理机制，把可能出错的代码放在try语句块中，如果出错了，就会被catch捕获来处理异常。如果不catch 一旦出错就会造成程序崩溃。finally：无论结果如何，允许在 try 和 catch 之后执行代码。

try {
        // 供测试的代码块
}
 catch(err) {
         //处理错误的代码块
} 
finally {
         //无论 try / catch 结果如何都执行的代码块
}

应用

let fn = () => console.log('同步1');
  Promise.try(fn);
  console.log('同步2');
  //'同步1'
  //'同步2'

解决让同步函数同步执行，异步函数异步执行现阶段方法

方法一：使用async匿名函数,会立即执行里面的async函数，因此如果f是同步的，就会得到同步的结果；如果f是异步的，就可以用then指定下一步，如果想捕获错误，使用catch方法。
```
 let fn = () =>console.log('同步1');
 (async ()=>fn())()
 .then(resolve)
 .catch(err=>console.log(err))
 console.log('同步2')
 //log后
 //'同步1'
//'同步2'
```

方法二：使用promise立即执行的匿名函数

 let fn = () =>console.log('同步1');
(
    () => new Promise(
       resolve => resolve(fn())
 ))()
console.log('同步2')
//log后
//'同步1'
       //'同步2'

over~有问题留言
拓展：

什么是Iterator ？
异步编程是什么？异步编程都有哪些解决方案？
如何使用promise实现ajax，封装axios？
如何使用纯原生js实现promise？

借鉴：
https://blog.csdn.net/sjw1039...
http://es6.ruanyifeng.com/#do...
https://developer.mozilla.org...

深度理解Promise--Promise的特点和方法详解

什么是promise？

promise的特点

promise实例操作

首先创造了一个Promise实例

下面看一下构造函数原型的方法

Promise.prototype.then()

Promise.prototype.catch()

Promise.prototype.finally()

promise的链式调用

promise自身API

Promise.resolve()

Promise.reject()

Promise.all()

Promise.allSettled -- 兼容性不友好

Promise.race()

Promise.try-- 提案

解决让同步函数同步执行，异步函数异步执行现阶段方法

JCat_李小黑

引用和评论

浏览器原生「磁吸」效果！Anchor Positioning 锚点定位神器解析

Vue.js-Vue实例

2025年最新反编译微信小程序的教程及工具

你可能不知道的图片加载相关知识

手写一个动态海洋和天空效果的vue hooks

Base64编码的“暗坑”：解密失败？可能是这些原因！

原生electron起步-从零到一完成构建和打包