Promise详解

大家好，欢迎来到IT知识分享网。

Promise详解

一、Promise的基本使用

• Promise是一个构造函数，原型对象上有then、catch等方法。
• 在通过new创建Promise对象时，我们需要传入一个回调函数，我们称之为executor
• • 这个回调函数会被立即执行，并且给传入另外两个回调函数resolve、reject；
  • 当我们调用resolve回调函数时，会执行Promise对象的then方法传入的回调函数；
  • 当我们调用reject回调函数时，会执行Promise对象的catch方法传入的回调函数；

// 1.写法一： const promise1 = new Promise((resolve, reject) => { 
    console.log("这里的代码立即执行"); resolve(); // 当执行resolve方式时，会立即执行then中的回调函数 // reject(); // 当执行reject方法时， 会执行catch中的回调函数  // resolve 与 reject只能执行一个 // 返回的时Promise对象 }).then(() => { 
    console.log("成功的回调"); }).catch(() => { 
    console.log("失败的回调"); }) // 2.写法二： const promise2 = new Promise((resolve, reject) => { 
    console.log("这里的代码立即执行！"); // resolve();  reject(); }) promise2.then(() => { 
    console.log("成功的回调"); }).catch(() => { 
    console.log("失败的回调"); }) // 3.写法三： const promise3 = new Promise((resolve, reject) => { 
    console.log("这里的代码立即执行！"); // resolve();  reject(); }) promise3.then(() => { 
    console.log("成功的回调"); }, () => { 
    console.log("失败的回调"); }) 

二、Pormise的三种状态

Promise使用过程可以划分成三个状态：

• 待定（pending）: 初始状态，既没有被兑现，也没有被拒绝；
• • 当执行executor中的代码时，处于该状态；
• 已兑现（fulfilled）: 意味着操作成功完成；
• • 执行了resolve时，处于该状态；
• 已拒绝（rejected）: 意味着操作失败；
• • 执行了reject时，处于该状态；

// 注意: Promise状态一旦确定下来, 那么就是不可更改的(锁定) new Promise((resolve, reject) => { 
    // pending状态: 待定/悬而未决的 console.log("--------") reject() // 处于rejected状态(已拒绝状态) resolve() // 处于fulfilled状态(已敲定/兑现状态) console.log("++++++++++++") }).then(res => { 
    console.log("res:", res) }, err => { 
    console.log("err:", err) }) 

三、resolve的参数

1.传入普通的值或对象

如果resolve传入一个普通的值或者对象，那么这个值会作为then回调的参数；

2.传入一个Promise

如果resolve中传入的是另外一个Promise，那么这个新Promise会决定原Promise的状态;

3.传入实现了then的对象

如果resolve中传入的是一个对象，并且这个对象有实现then方法，那么会执行该then方法，并且根据 then方法的结果来决定Promise的状态;

// 1.传入普通参数 const promise1 = new Promise((resolve, rejest) => { 
    console.log("这里的代码立即执行"); resolve("传入字符串"); }) promise1.then((res) => { 
    console.log(res); }) // 2.传入Promise const promise2 = new Promise((resolve, rejest) => { 
    console.log("aaaaaaaaaaaa"); // 状态不是由这里决定的，而是由resolve中的Promise对象决定 resolve(new Promise((resolve, rejest) => { 
    rejest() // 这里决定状态 })) }) promise2.then((res) => { 
    console.log(res); // 执行的不是这里的代码 }, (err) => { 
    console.log("err",err); // 执行的是这里的代码 }) // 3.传入实现了then的对象 const promise3 = new Promise((resolve, rejest) => { 
    console.log("asdf"); const obj = { 
    // 实现then方法，这个方法中也是resolve和rejest参数 then: (resolve, rejest) => { 
    rejest("这里决定状态") } } resolve(obj) // 状态不是由这里决定，而是由传入的obj对象的then方法中的resolve和rejest决定 }) promise3.then((res) => { 
    console.log("res", res); }, (err) => { 
    console.log("err", err); // err 这里决定状态 (执行这里的代码) }) 

四、Promise的实例方法

1.then方法

(1)then的参数

• then方法是Promise对象上的一个方法：它其实是放在Promise的原型上的 Promise.prototype.then
• then方法接受两个参数：
• • resolve的回调函数：当状态变成fulfilled时会回调的函数；
  • reject的回调函数：当状态变成reject时会回调的函数；

promise.then(res => { 
    console.log("res", res); }, err => { 
    console.log("err", err); }) // 等价于 promise.then(res => { 
    console.log("res", res); }).catch(err => { 
    console.log("err", err); }) 

(2)then被多次调用

// then方法多次调用 : 当then被多次调用时，每一个then中的回调函数都会被执行 // 所以一下代码会执行 3 次 const promisea = new Promise((resolve, rejest) => { 
    resolve('aaaaaa') }) promisea.then(res => { 
    console.log("res1:", res); }) promisea.then(res => { 
    console.log("res2:", res); }) promisea.then(res => { 
    console.log("res3:", res); }) 

(3)then的返回值

• 返回一个普通纸；
• 返回一个Promise；
• 返回一个实现了then方法的对象(即thenable值)；

 // then的返回值 then的返回值都是一个参数 // 1.返回一个普通值 // 当返回一个普通值时,这个普通值会被最为新new的Promise的resolve的参数,所以then返回的是一个Promise const promisea = new Promise((resolve, rejest) => { 
    resolve("aaa") }) promisea.then(res => { 
    // 这里的第一个then方法是promisea的then方法 return "bbb" // 相当于: new Promise((resolve,rejest) => {resolve('aaa)}) 即这个普通值会被作为新的Promise的resolve值 }).then(res => { 
    // 这里的第二个then是第二个Promise(即 new Promise((resolve,rejest) => {resolve('aaa)}) )的then方法,而不是promisea的then方法 console.log(res); // bbb // 当然这里还可以有返回值 }) // 2.返回值是一个Promise对象时 const promiseb = new Promise((resolve, rejest) => { 
    resolve('aaa') }) promiseb.then(res => { 
    // 这里的then方法是promiseb的then方法 return new Promise((resolve, rejest) => { 
    setTimeout(() => { 
    resolve('bbb') }, 3000) }) }).then(res => { 
    // 这里的then也是new的新的Promise的then方法,而不是promiseb的 console.log(res); // 三秒后输出 bbb }) // 3.当返回值是一个实现了then方法的对象时 const promisec = new Promise((resolve, rejest) => { 
    resolve('aaa') }) promiseb.then(res => { 
    // 这里的then方法是promiseb的then方法 const obj = { 
    then: function(resolve, rejest) { 
    resolve('bbb') } } return obj // 新的promise的状态有obj对象里的resolve或reject决定 }).then(res => { 
    console.log(res); // bbb }) 

2.catch方法

catch方法也是Promise对象上的一个方法：它也是放在Promise的原型上的 Promise.prototype.catch。

(1)catch的基本使用

const promiseb = new Promise((resolve, reject) => { 
    // reject("promiseb") resolve('resolve') }) promiseb.then(resolve => { 
    console.log("resolve"); return new Promise((resolve, reject) => { 
    reject('新的promise') }) }).catch(err => { 
    // 这里的catch 首先 对应的是promiseb的reject，而不是then后新的promise，但当promiseb调用的是reject时，如果then中新的promise调用了reject，会执行这里的catch console.log(err); }) 

(2)catch被多次调用

当某个promise对象有多个catch，调用reject或抛出异常时，每一个catch都会被执行。

const promisea = new Promise((resolve, rejest) => { 
    // 当调用rejest或抛出异常时，都会执行then中的错误捕获的方法 throw new Error('错误') // rejest(); }) promisea.then(undefined, (error) => { 
    console.log("err", error); }) // catch相当于then的错误的捕获的语法糖 // 当有promisea有多个catch时，每一个都会被执行调用 promisea.catch(() => { 
    console.log("相当于时then错误捕获的语法糖"); }) promisea.catch(() => { 
    console.log("相当于时then错误捕获的语法糖"); }) promisea.catch(() => { 
    console.log("相当于时then错误捕获的语法糖"); }) 

(3)catch的返回值

和then返回值一样，返回的都是promise。

const promisec = new Promise((resolve, rejest) => { 
    // resolve("promisec") rejest('promisec') }) promisec.then(resolve => { 
    console.log("promisec：", resolve); }).catch(err => { 
    console.log("err:", err); return 'catch' // 这里和then的返回值一样，会生成新的Promise，如果新的Promise中调用resolve则会执行下一个then方法，如果调用reject则会执行catch方法 }).then(resolve => { 
    console.log("new Promise:", resolve); // new Promise: catch }).catch(err => { 
    console.log("err:", err); }) 

3.finally方法

finally是在ES9中新增的一个特性：表示无论Promise对象无论变成fulfilled还是reject状态，最终都会 被执行的代码。

const promised = new Promise((resolve, rejest) => { 
    resolve("resovle"); }) promised.then(resovle => { 
    console.log(resovle); }).catch(err => { 
    console.log(err); }).finally(() => { 
    console.log("最终都会执行"); }) 

五、Promise的类方法

1.resolve方法

then、catch、finally都是promise的实例方法，resolve是promise的类方法。

resolve的参数：

• 普通纸；
• promise
• thenable

Promise.resolve('tjx') // 等价于 const promisee = new Promise((resolve, rejest) => { 
    resolve('tjx') }) // promise可以传入三种参数：1.普通的参数 2.promise 3.实现了then方法的对象 // 1.普通参数 const promisep = Promise.resolve('adf') promisep.then(resolve => { 
    console.log(resolve); }).catch(err => { 
    console.log(err); }) // 2.promise const promisepro = Promise.resolve(new Promise((resolve, rejest) => { 
    resolve('sfa') })) promisepro.then(resolve => { 
    console.log(resolve); }).catch(err => { 
    console.log(err); }) // 3.thenable const promiseable = Promise.resolve({ 
    then: function(resolve, rejest) { 
    resolve() } }) promiseable.then(resolve => { 
    console.log(resolve); }).catch(err => { 
    console.log(err); }) 

2.rejest方法

reject方法类似于resolve方法，只是会将Promise对象的状态设置为reject状态;

Promise.reject传入的参数无论是什么形态，都会直接作为reject状态的参数传递到catch的。

Promise.reject('rejest') // 相当于 const promisez = new Promise((resolve, rejest) => { 
    rejest('rejest') }) // reject的参数无论是什么都只是修改promise的rejest状态并把这个参数传递过去 const promisex = Promise.reject(new Promise((resolve, rejest) => { 
    resolve('resovle') })) promisex.then(resolve => { 
    console.log(resolve); }).catch(err => { 
    console.log(err); // promise对象 }) 

3.all方法

• all方法也是promise的类方法，他的作用是将多个Promise包裹在一起形成一个新的Promise；
• 新的Promise状态由包裹的所有Promise共同决定：
• • 当所有的Promise状态变成fulfilled状态时，新的Promise状态为fulfilled，并且会将所有Promise的返回值 组成一个数组；
  • 当有一个Promise状态为reject时，新的Promise状态为reject，并且会将第一个reject的返回值作为参数；

const promise1 = new Promise((resolve, rejest) => { 
    resolve("1") }) const promise2 = new Promise((resolve, rejest) => { 
    resolve("2") }) const promise3 = new Promise((resolve, rejest) => { 
    // resolve("3") rejest('err') }) Promise.all([promise1, promise2, promise3, '这里也可以是其他类型参数']).then(resolve => { 
    console.log("当all参数中所有的promise的resolve时，执行这里的函数，resolve：", resolve); // 当all参数中所有的promise的resolve时，执行这里的函数，resolve： [ '1', '2', '3', '这里也可以是其他类型参数' ] }).catch(err => { 
    console.log("当all的参数中所有的promise中有一个rejest时，就执行这里的代码就，error：", err); // 当all的参数中所有的promise中有一个rejest时，就执行这里的代码就，error： err }) 

4.allSettled方法

• all方法有一个缺陷：当有其中一个Promise变成reject状态时，新Promise就会立即变成对应的reject状态。 那么对于resolved的，以及依然处于pending状态的Promise，我们是获取不到对应的结果的；
• 在ES11中，添加了新的API Promise.allSettled： 该方法会在所有的Promise都有结果（settled），无论是fulfilled，还是reject时，才会有最终的状态； 并且这个Promise的结果一定是fulfilled的；

const promise4 = new Promise((resolve, rejest) => { 
    resolve("1") }) const promise5 = new Promise((resolve, rejest) => { 
    resolve("2") }) const promise6 = new Promise((resolve, rejest) => { 
    // resolve("3") rejest('err') }) Promise.allSettled([promise4, promise5, promise6]).then(resolve => { 
    console.log(resolve); // 输出为： // [ // { status: 'fulfilled', value: '1' }, // { status: 'fulfilled', value: '2' }, // { status: 'rejected', reason: 'err' } // ] }).catch(err => { 
    console.log(err); // 只会进入成功的回调，不会进入这里失败的回调 }) 

5.race方法

如果有一个Promise有了结果，我们就希望决定最终新Promise的状态，那么可以使用race方法：

• race是竞技、竞赛的意思，表示多个Promise相互竞争，谁先有结果，那么就使用谁的结果；

const promise7 = new Promise((resolve, rejest) => { 
    setTimeout(() => { 
    resolve("7") }, 3000) }) const promise8 = new Promise((resolve, rejest) => { 
    setTimeout(() => { 
    resolve("8") }, 1000) }) const promise9 = new Promise((resolve, rejest) => { 
    setTimeout(() => { 
    // resolve("9") rejest('err') }, 500) }) Promise.race([promise7, promise8, promise9]).then(resolve => { 
    console.log(resolve); // 返回接收到的第一个resolve，如果是rejest则执行catch中的代码 }).catch(err => { 
    console.log(err); }) 

6.any方法

• any方法是ES12中新增的方法，和race方法是类似的：
• • any方法会等到一个fulfilled状态，才会决定新Promise的状态；
  • 如果所有的Promise都是reject的，那么也会等到所有的Promise都变成rejected状态，然后再执行catch中的代码，那么会报一个AggregateError的错误；

const promise10 = new Promise((resolve, rejest) => { 
    setTimeout(() => { 
    resolve("7") }, 3000) }) const promise11 = new Promise((resolve, rejest) => { 
    setTimeout(() => { 
    resolve("8") }, 1000) }) const promise12 = new Promise((resolve, rejest) => { 
    setTimeout(() => { 
    rejest('err') }, 500) }) Promise.any([promise10, promise11, promise12]).then(resolve => { 
    console.log(resolve); //  }).catch(err => { 
    console.log(err); }) // 首先出现的是err，但是是rejest，所以继续等待第一个resolve，出现了第一个resolve就执行then中代码，如果全是rejest，则会等到所有的rejest只会再执行rejest，然后报一个错 

六、async

1.异步函数 async

async关键字用于声明一个异步函数。

异步函数的返回值是promise。

// 写法一 async function foo() { 
    } // 写法二 const foo2 = async function() { 
    } // 写法三 const foo3 = async () => { 
    } // 写法四 class Person { 
    async foo() { 
    } } 

2.异步函数执行流程

异步函数的内部代码执行过程和普通的函数是一致的，默认情况下也是会被同步执行。

异步函数有返回值时，和普通函数会有区别：

• 情况一：异步函数也可以有返回值，但是异步函数的返回值会被包裹到Promise.resolve中；
• 情况二：如果我们的异步函数的返回值是Promise，Promise.resolve的状态会由Promise决定；
• 情况三：如果我们的异步函数的返回值是一个对象并且实现了thenable，那么会由对象的then方法来决定；

如果我们在async中抛出了异常，那么程序它并不会像普通函数一样报错，而是会作为Promise的reject来传递；

// 异步函数与普通函数的区别--返回值 async function foo() { 
    console.log("foo function start-"); console.log("中间件"); console.log("foo function end-"); // 1.返回一个值，这个值作为新的promise的resolve的参数 // 返回thenable // return { 
    // then: function(resolve, rejest) { 
    // resolve('sfafsd') // } // } // 返回Promise return new Promise((resolve, reject) => { 
    setTimeout(() => { 
    resolve('hhhhhhhhh') }, 2000) }) } // 异步函数的返回值一定是一个Promise const promise = foo() promise.then(res => { 
    console.log("promise then function exec:", res); }) // 异步函数与普通函数的区别--异常处理 async function foo() { 
    console.log("foo function start"); console.log("中间代码"); // 异步函数中的异常，会被作为异步函数返回的Promise的reject值 throw new Error('error message') console.log("foo function end"); } foo().catch(err => { 
    console.log("err", err); }) console.log("后续代码"); 

七、await

async函数另外一个特殊之处就是可以在它内部使用await关键字，而普通函数中是不可以的。

await关键字有什么特点呢？

• 通常使用await是后面会跟上一个表达式，这个表达式会返回一个Promise；
• 那么await会等到Promise的状态变成fulfilled状态，之后继续执行异步函数；

• 如果await后面是一个普通的值，那么会直接返回这个值；
• 如果await后面是一个thenable的对象，那么会根据对象的then方法调用来决定后续的值；
• 如果await后面的表达式，返回的Promise是reject的状态，那么会将这个reject结果直接作为函数的Promise的 reject值；

// 1.awiat跟上表达式 function requestData() { 
    return new Promise((resolve, reject) => { 
    setTimeout(() => { 
    // resolve(12) reject(11) }, 2000) }) } // async function foo() { 
    // const res1 = await requestData() // 可以把这条代码到下一个await之前的代码看出then中处理成功的代码 // // 当await返回为失败状态时，运行报错，因为没有写失败时的处理代码 // console.log("后面代码1", res1); // console.log("后面代码2"); // console.log("后面代码3"); // const res2 = await requestData() // console.log("res2后面的代码", res2); // } // foo() // 2.reject值 async function foo() { 
    const res1 = await requestData() console.log("res1", res1); } foo().catch(err => { 
    console.log("err:", err); // err: 11 })