深度理解PromisePromise的特点和方法详解

3次阅读

共计 8561 个字符，预计需要花费 22 分钟才能阅读完成。

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

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

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

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

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

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

首先创造了一个 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.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'

解决让同步函数同步执行，异步函数异步执行现阶段方法
- 方法一：使用 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'

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'

over~ 有问题留言
拓展：

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

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

正文完

es6 promise

发表至： javascript

2019-08-15

0

前端项目自动部署到服务器

关于javascript:博客标题导航栏及标题导航栏联动的实现

关于javascript:关于微前端你想知道的都在这

关于javascript:基于vue的插槽式动态布局组件slotlayout

糟了上网记录被-Python-扒下来了

深度理解PromisePromise的特点和方法详解

什么是 promise？

promise 的特点

promise 实例操作

promise 自身 API

站内搜索