Promise

有时间可以详细看看阮一峰的教程。
参考教程

一 Promise 是什么? 解决了什么问题?

​ Promise 是一个保存着异步操作结果的对象。

​ Promise 替代了传统的异步编程(回调函数,事件)方案,并且更加强大。

二 Promise 特点

​ (1)对象的状态不受外界影响

pendingfulfilledrejected
进行中成功已失败

​ (2) 状态一旦被更改就不会再变

三 Promise缺点

​ (1) 无法中途取消,一旦创建就会立即执行

​ (2) 如果不设置回调函数,Promise内部的错误不会反应到外部

​ (3) 当处于Pending状态时,无法得知当前已经进行到哪一步

四 Promise构造函数是同步还是异步? then方法呢?

​ (1) promise构造函数是同步执行的, Promise新建后会立即执行(同步)。

​ (2) then方法是异步执行的。


Promise常用方法如下:

五 then()

then方法是Promise实例状态改变时回调函数。

​ then方法的参数是resolve reject

then方法返回的是一个新的Promise实例

六 catch()

catch方法是一个用来处理发生错误时的回调函数。

七 finally()

finally方法不管 Promise 对象最后状态如何,都会执行的操作。

​ 使用场景:结束请求时的加载动画......

七 all()

all方法接受由一个或多个Promise实例组成的数组。

all方法中:如下例子:参数中的Promise实例只要有一个被rejected,那么最终结果就是rejected,始终返回的是第一个被rejected的实例

let b1  = new Promise((resolve,reject) => {
    setTimeout(() => { resolve('b1成功') }, 1000);
})

let b2  = new Promise((resolve,reject) => {
    setTimeout(() => { reject('b2失败') }, 500);
})

let b3  = new Promise((resolve,reject) => {
    setTimeout(() => { reject('b3失败')   }, 200);
})

Promise.all([b1,b2,b3]).then(res => {
    console.log(res);  //  Uncaught (in promise) b3失败
})

all方法中:如下例子:参数中的Promise实例全部 fulfilled,最终结果才是 fulfilled

let b1  = new Promise((resolve,reject) => {
    setTimeout(() => { resolve('b1成功') }, 1000);
})

let b2  = new Promise((resolve,reject) => {
    setTimeout(() => { resolve('b2成功') }, 500);
})

let b3  = new Promise((resolve,reject) => {
    setTimeout(() => { resolve('b3成功')   }, 200);
})

Promise.all([b1,b2,b3]).then(res => {
    console.log(res);  // ['b1成功', 'b2成功', 'b3成功']
}) 

八 race()

race方法接受由一个或多个Promise实例组成的数组。

race方法最终状态:第一个结束的实例状态是个啥,最终结果就是个啥。请详细比较如下例子

​ 下面的例子就像你同时跟三个妹纸聊天,就看哪个更快回复你。

let b1  = new Promise((resolve,reject) => {
    setTimeout(() => { resolve('b1成功') }, 1000);
})

let b2  = new Promise((resolve,reject) => {
    setTimeout(() => { reject('b2失败') }, 100);
})

let b3  = new Promise((resolve,reject) => {
    setTimeout(() => { resolve('b3成功')   }, 10);
})


Promise.race([b1,b2]).then(res => {
    console.log(res);  // (in promise) b2失败
    // 实例b2失率先失败后:直接返回结果,就不管了b1是个啥了。
}) 

Promise.race([b2,b3]).then(res => {
    console.log(res);  // b3成功
    // 实例b3率先成功后直接返回结果,不管b2了
}) 

九 allSettled()

allSettled方法接受由一个或多个Promise实例组成的数组。

allSettled方法不管这一组实例最终的结果怎么样,反正等这组实例全部执行结束后才执行。

let b1  = new Promise((resolve,reject) => {
    setTimeout(() => { resolve('b1成功') }, 1000);
})

let b2  = new Promise((resolve,reject) => {
    setTimeout(() => { reject('b2失败') }, 100);
})

let b3  = new Promise((resolve,reject) => {
    setTimeout(() => { resolve('b3成功')   }, 10);
})


Promise.allSettled([b1,b2,b3]).then(res => {
    console.log(res);  

    /* 
       [
          {status: 'fulfilled', value: 'b1成功'}
          {status: 'rejected', reason: 'b2失败'}
          {status: 'fulfilled', value: 'b3成功'}
        ] 
    */
}) 

十 any()

any方法接受由一个或多个Promise实例组成的数组。

any 方法始终返回这组实例中率先成功的那个,如果这组实例全部失败:最终结果就是失败

        
let a1  = new Promise((resolve,reject) => {
    setTimeout(() => { reject('a1失败') }, 10);
})

let a2  = new Promise((resolve,reject) => {
    setTimeout(() => { reject('a2失败') }, 50);
})

let a3  = new Promise((resolve,reject) => {
    setTimeout(() => { resolve('a3成功')   }, 100);
})
Promise.any([a1,a2,a3]).then(res => {
    console.log(res);   // a3成功
}) 

//---------------------------------------------------------
let a1  = new Promise((resolve,reject) => {
    setTimeout(() => { reject('a1失败') }, 10);
})

let a2  = new Promise((resolve,reject) => {
    setTimeout(() => { reject('a2失败') }, 50);
})

let a3  = new Promise((resolve,reject) => {
    setTimeout(() => { reject('a3失败')   }, 100);
})
Promise.any([a1,a2,a3]).then(res => {
    console.log(res);   //  All promises were rejected
}) 

简单即可
6 声望2 粉丝

« 上一篇
节流--防抖
下一篇 »
Vue3生命周期