Promise

目录

一、简介

特点

缺点

解决问题

二、创建

new Promise

Promise.resolve(value)

Promise.reject()

三、调用(Promise对象自带的方法)

then

catch

all

allSettled

race

any

finally

---

一、简介

Promise是一个构造函数,共有三种状态：

1. pending 进行
2. fulfilled 已成功
3. rejected 已失败

特点

1. 对象的状态不受外界的影响。只有异步操作的结果能够决定当前的状态（promise承诺）
2. 状态发生改变，就不会再改变（resolved定型）。如果再对promise对象添加回调函数，也会立即得到这个结果

缺点

1. Promise无法取消：一旦新建就会立即执行，且不能中断
2. 在pending状态时，不知道进行到哪个阶段（刚开始还是快完成）
3. 如果不设置回调函数，在Promise内部抛出的错误，不会反映到外部

解决问题

回调地狱：回调函数多层嵌套

根本问题：

• 嵌套函数存在耦合性，牵一发动全身
• 嵌套多难处理问题

二、创建

new Promise

let p = new Promise(function (resolve, reject){
		//做一些异步操作
		setTimeout(function(){
			console.log('执行完成Promise');
			resolve('要返回的数据可以任何数据例如接口返回数据');
		}, 2000);
	});

通过构造函数创建出一个Promise对象并赋值给p，之后就可以通过p使用Promise上的原型方法

其中Promise接受的参数是一个回调函数，其参数resolve和reject也分别是个函数：

• resolve:异步操作成功时调用，pending=>fulfilled，将异步操作的结果作为参数传递出去
• reject:异步操作失败时调用，pending=>rejected，将异步操作失败的结果作为参数传递出去

在Promise中，返回任意一个非 promise 的值都会被包裹成 promise 对象，例如return 2会被包装为return Promise.resolve(2)

• 构建Promise对象时,需要传入一个executor函数,主要业务流程都在executor函数中执行.
• Promise构造函数执行时立即调用executor函数,resolve和reject两个函数作为参数传递给executor,resolve和reject函数被调用时,分别将promise的状态改为fulfilled(完成)或者rejected(失败).一旦状态改变,就不会再变
• 在executor函数中调用resolve函数后,会触发promise.then设置的回调函数,而调用reject函数后,会触发promise.catch设置的回调函数.

promise构造函数是同步执行的，then方法是异步执行的！

Promise.resolve(value)

Promise.resolve(11).then(value=>{
    console.log(value)
})

Promise.reject()

Promise.reject(new Error("error!"))

三、调用(Promise对象自带的方法)

then

• 传入一个回调函数，返回操作成功的信息；
• 传入两个回调函数，第二个则为返回操作失败的信息

catch

传入回调函数，返回操作失败的信息

   t回调函数作为参数传给resolve,c回调函数作为参数传给reject,当在setTimeout种调用resolve和reject时，实际上就是分别调用t,c函数

对比then：

• 再执行抛出异常了（代码出错了），不会报错卡死js，而是进入到catch当中
• 有错误的代码也不会报错

then和catch都会返回一个新的Promise

all

同时处理多个请求，在所有异步操作执行完后并且执行结果都是成功的时候才执行回调

const p = Promise.all([p1, p2, p3]);  // 其中，p1,p2,p3均为Promise实例

• 应用场景：页面中所有请求都返回数据之后，再渲染页面
• 接受参数：Promise的 iterable 类型（注：Array，Map，Set 都属于 ES6 的 iterable 类型）
• 注意事项：
  • 如果传入的可迭代对象为空，会同步地返回一个已完成（resolved）状态的promise。 
  • 如果所有传入的 promise 都变为完成状态，或者传入的可迭代对象内没有 promise，Promise.all 返回的 promise 异步地变为完成。 
• 返回值：
  • 失败：最先被reject失败状态的值
  • 成功：结果数组，按传入顺序保存每个promise对象resolve执行的结果（注意：执行顺序不一定一样）
• 状态改变：所有状态都是resolved之后，all变成resolved；若果有一个是reject，all就变成rejected

allSettled

当想要获得同时发起的多个请求的结果值时，可以用allSettled。

每个结果都会有以下属性

• status：一个字符串， "fulfilled"/ "rejected"，表示 最终状态。
• value：仅当 status 为 "fulfilled"，才存在。在 promise 兑现时才有 value。
• reason：仅当 status 为 "rejected"，才存在，在 promsie 拒绝时才有 reason。
• 如果 iterable 传递的不是空的，但包含未响应的 promise，则返回的 promise 仍然异步（而不是同步）兑现。

race

Promise.race([p1,p2,p3])

• 应用场景：当要做的一件事超过一段时间就不做了

  • Promise.race([p1,timeoutPromise(5000)])

• 接受参数：Promise可迭代对象
• 返回值：第一个完成的Promise对象返回的值（看谁跑的快）
• 状态改变：第一个完成的Promise对象完成的状态

any

该方法用于获取首个兑现的 promise 的值。只要有一个 promise 兑现了，那么此方法就会提前结束，而不会继续等待其他的 promise 全部敲定。

finally

Promise.finally(()=>{})

• 回调函数不接受任何的参数，不知最后的状态如何
• Promise结束之后无论状态时resolve还是reject均会执行
• 最终返回的默认会是一个上一次的Promise对象值,若抛出异常则返回异常的Promsie对象

等同于(then方法特例)

promise.then(
    result=>{
        return result
    },
    error=>{
        throw error
    }
)