ES6Promise概念及其用法

sp旧梦

已于 2024-09-21 10:49:24 修改

阅读量477

点赞数 4

文章标签： es6 前端 javascript

于 2024-09-21 10:42:59 首次发布

本文链接：https://blog.csdn.net/qq_39465114/article/details/142411323

版权

Promise是ES6推出的一个完美的异步解决方案，它支持链式调用，避免回调地狱。

一、什么是Promise

Promise是一个对象或者是构造函数，用来封装异步操作并获得成功或失败的结果。

二、Promise三种状态

pending：等待状态（初始状态）

fulfilled/resolved：成功状态

rejected：失败状态

Promise状态只能由pending变为fulfilled/resolved，以及pending变为rejected。

三、Promise语法

Promise是一个构造函数，它的参数是一个回调函数，这个回调函数有两个参数：

resolve：修改成功状态的方法。

reject：修改失败状态的方法

new Promise((resolve, reject) => {
            console.log('new Promise同步代码');
            if (Math.random() > 0.5) {
                resolve('改为修改状态')
            } else {
                reject('改为失败状态')
            }
        })

四、Promise的实例方法

1.then()：有两个回调函数作为参数，分别是成功的回调和失败的回调（不常用）

new Promise((resolve, reject) => {
            console.log('new Promise同步代码');
            setTimeout(() => {//模拟异步ajax操作
                if (Math.random() > 0.5) {
                    resolve('改为修改状态')
                } else {
                    reject('改为失败状态')
                }
            }, 1000)
        })
        .then(res=>{
                console.log('then方法的第一个回调接收resolve的参数',res);
                return '返回的参数' 
            },err=>{
                //then方法的第二个回调函数用来接收reject传来的参数，这种写法不多见，一般用catch方法
                console.log('then方法的第二个回调接收resolve的参数',err);
            })

2.catch()：方法用来捕获reject方法传来的参数

new Promise((resolve, reject) => {
            console.log('new Promise同步代码');
            setTimeout(() => {//模拟异步ajax操作
                if (Math.random() > 0.5) {
                    resolve('改为修改状态')
                } else {
                    reject('改为失败状态')
                }
            }, 1000)
        })
        .then(res => {
                console.log('then方法的第一个回调接收resolve的参数', res);
            })
        .catch(err => {
                console.log('使用catch方法捕获reject方法传过来的参数', err);
            })

3.finally()：无论成功还是失败，最后一定会执行的方法

new Promise((resolve, reject) => {
            console.log('new Promise同步代码');
            setTimeout(() => {//模拟异步ajax操作
                if (Math.random() > 0.5) {
                    resolve('改为修改状态')
                } else {
                    reject('改为失败状态')
                }
            }, 1000)
        })
        .then(res => {
                console.log('then方法的第一个回调接收resolve的参数', res);
            })
        .catch(err => {
                console.log('使用catch方法捕获reject方法传过来的参数', err);
            })
        .finally(() => {
                console.log('无论成功还是失败最后一定会执行');
            })

五、Promise的静态方法

1.Promise.all()：处理异步任务的并发场景，全部成功才能成功，有一个失败则返回失败结果

function fn1(num) {
            var p = new Promise((resolved, reject) => {
                setTimeout(() => {
                    resolved('fn1异步的结果：' + num)
                }, 50)
            })
            return p
        }
function fn2(num) {
            var p = new Promise((resolved, reject) => {
                setTimeout(() => {
                    resolved('fn2异步的结果：' + num)
                    // reject('fn2异步的结果：' + num) //有一个失败
                }, 50)
            })
            return p
        }
function fn3(num) {
            var p = new Promise((resolved, reject) => {
                setTimeout(() => {
                    resolved('fn3异步的结果：' + num)
                }, 50)
            })
            return p
        }
        Promise.all([fn1(1), fn2(2), fn3(3)]).then(res => {
            console.log('res:' + res);//全部成功返回res:fn1异步的结果：1,fn2异步的结果：2,fn3异步的结果：3

        }).catch(err=>{
            console.log('err:'+err);//一个失败则返回err:fn2异步的结果：2
        })

2.Promise.race()：并发处理多个异步任务，只要有一个任务完成就能获得到结果（all方法的补充）

function fn1(num) {
            var p = new Promise((resolved, reject) => {
                setTimeout(() => {
                    resolved('fn1异步的结果：' + num)
                }, 2000)
            })
            return p
        }
function fn2(num) {
            var p = new Promise((resolved, reject) => {
                setTimeout(() => {
                    resolved('fn2异步的结果：' + num)
                }, 1000)
            })
            return p
        }
        Promise.race([fn1(1), fn2(2)]).then(res => {
            console.log('res:' + res); //res:fn2异步的结果：2
        })

3.Promise.any()：并发处理多个异步任务，只要有一个任务执行成功就得到结果（all方法的补充）

function fn1(num) {
            var p = new Promise((resolved, reject) => {
                setTimeout(() => {
                    resolved('fn1异步的结果：' + num)
                }, 2000)
            })
            return p
        }
function fn2(num) {
            var p = new Promise((resolved, reject) => {
                setTimeout(() => {
                    resolved('fn2异步的结果：' + num)
                }, 1000)
            })
            return p
        }
        Promise.any([fn1(1), fn2(2)]).then(res => {
            console.log('res:' + res); //res:fn2异步的结果：2
        })

4.Promise.resolve()：方法将现有对象转为fulfilled/resolved 状态的Promise对象

var p1=new Promise((resolve,reject)=>{
            resolve('成功')
            reject('失败')
        })
        Promise.resolve(p1).then(res => {
            console.log('res:' + res); //成功
        })

5.Promise.reject()：方法将现有对象转为rejected 状态的Promise对象

var p1=new Promise((resolve,reject)=>{
            resolve('成功')
            reject('失败')
        })
        Promise.reject(p1).catch(err=>{
            console.log('err:' + err);
        })