Promise对象的使用方法

189 阅读3分钟

一、基本使用方法

1.Promise构造函数 的基本用法

Promise构造函数的作用就是创建一个新的Promise实例,通过这个实例我们可以获取异步任务的消息,并进行处理。这是它的主要作用。

Promise构造函数接收一个固定格式的方法(执行器 executor),并传入两个函数resolvereject来结束异步的执行状态返回参数,基本用法如下

var timeout = Math.random()*3000

const pro = new Promise((resolve,reject)=>{
    setTimeout(()=>{
        if(timeout<=1000){
            resolve({
                time:timeout,
                msg:'正常'
            })
        }else{
            reject({
                time:timeout,
                msg:'超时'
            })
        }
    },timeout)
})

pro.then(res=>{
    console.log(res)
}).catch(err=>{
    console.log(err)
})

2.Promise.prototype.finally()

finally方法非常简单,它不接收任何参数,它是在promise执行完毕后无论结果如何都会执行的一个方法,当你想要在异步任务结束后无论结果如何都想要执行某个操作时颇为实用(例如取消页面的加载状态,或者做埋点等)。

延续上方的代码

//记录本次请求的时间
const record = []
pro.then(res=>{
    console.log(res)
}).catch(err=>{
    console.log(err)
}).finally(()=>{
    record.push(time)
})

3.Promise.all(iterable)

Promise.all方法接收一个可迭代(可枚举)的对象作为参数,例如Array,Map,Set都是可迭代的。并返回一个Promise实例。

它等待所有的异步同步操作都完成(或第一个失败)。

下方具体操作

const p1 = 1
const p2 = function(){
    return 'fun'
}
const p3 = new Promise((resolve,reject)=>{
    setTimeout(()=>{Y
        resolve('1500后返回的')
    },1500)
})

const pro = Promise.all([p1,p2(),p3])

pro.then(res=>{
    console.log(res) //[1,'fun','1500后返回的']
}).catch(err=>{
    console.log(err)
})

//错误情况如下
const err4 = new Promise((resolve,reject)=>{
    reject('错误')
})

const pro = Promise.all([p1,p2(),p3,p4])

pro.then(res=>{
    console.log(res)
}).catch(err=>{
    console.log(err) //错误
})

4.Promise.allSettled(iterable)

Promise.allSettled()方法同Promise.all()方法一样,都是接收一个可迭代对象作为参数。

但Promise.allSettled()不存在catch回调,所有的结果无论是resolve或reject返回的内容都将在then这个回调中展示,并给出状态。

Promise.allSettled()更适合异步任务彼此不依赖的情况下,或你总想知道结果时。

下方具体操作

const p1 = Promise.reject('rr')
const p2 = function(){
    return 'fun'
}
const p3 = new Promise((resolve,reject)=>{
    setTimeout(()=>{
        resolve('1500后返回的')
    },1500)
})
const p4 = new Promise((resolve,reject)=>{
    reject('错误')
})
const p5 = new Promise((resolve,reject)=>{
    reject('错误2')
})

const pro = Promise.allSettled([p1,p2(),p3,p4,p5])

pro.then(res=>{
    console.log(res) 
    /**[
        0: {status: 'rejected', reason: 'rr'}
        1: {status: 'fulfilled', value: 'fun'}
        2: {status: 'fulfilled', value: '1500后返回的'}
        3: {status: 'rejected', reason: '错误'}
        4: {status: 'rejected', reason: '错误2'}
    ]*/
})

5.Promise.race(iterable)

Promise.race()接收一个可迭代对象,一旦可迭代对象的某个promise解决或拒绝,返回的promise实例将被解决或拒绝。

它取迭代器中完成速度最快的一个实例

这里就不做演示了

5.Promise.resolve()和Promise.reject()

这两个方法是返回一个带有解决或拒绝原因的Promise对象

这两个方法最广泛的用途应该是在执行同步任务时来指定结果的。

6.Promise.any

目前处于实验性阶段,暂不推荐使用

二、延伸问题

什么是异步任务,js有哪些异步任务

什么是构造函数

使用Promise.race()方法来做一个计算程序需要运行多久的计时器