ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

Promise学习笔记

2021-09-14 10:34:45  阅读:31  来源: 互联网

标签:resolve console log res 笔记 学习 Promise reject


目录大纲

  • 初识Promise
    • 1)Promise是什么 2)Promise基本用法
  • Promise的实例方法
    • 1)then() 2)cach 3)finally()
  • Promise 的构造函数方法
    • 1)Promise.resolve() 2)Peomise.reject() 3)Peomise.all() 4)Promise.race() 5)Promise.allSettled()
  • Promise的注意事项以及应用
    • 1)Promise注意事项 2)Promise 的应用

一、初识Promise

1、Promise是什么

Promises是异步操作的一种解决方案
认识回调函数:

        document.addEventListener('click', () => {
            console.log('这是异步函数')
        })
        console.log('这是同步函数')

2、什么时候使用Promise

Promise 一般用来解决层层嵌套的回调函数(回调地狱 callback hell)的问题
回调地狱问题案例:

        const move = (el, { x = 0, y = 0 } = {}, end = () => { }) => {
            el.style.transform = `translate3d(${x}px,${y}px,0)`
            el.addEventListener('transitionend', () => {
                end()
            })
        }
        let BOX = document.getElementById('box')
        document.addEventListener('click', () => {
            move(BOX, { x: 10 }, () => {
                move(BOX, { x: 10, y: 50 }, () => {
                    move(BOX, { x: 40, y: 50 }, () => {
                        move(BOX)
                    })
                })
            })
        })

3、Promise的基本用法

1)、实例化构造函数的生成的实例对象

基本语法
 const p = new Promise(() => { })

2)、Promise的状态

Promise的状态一旦变化,就不会变

Promise有3种状态,一开始是pending(未完成),执行resolve,变成fulfilled(resolved),已成功;
执行 reject ,变成rejected ,已失败

      const p1 = new Promise((resolve, reject) => {
            // Promise有3种状态,一开始是pending(未完成),执行resolve,变成fulfilled(resolved),已成功
            // 执行  reject ,变成rejected ,已失败
            resolve()
            reject()

            // Promise的状态一旦变化,就不会变

        })
        console.log(p1) //Promise {<pending>}=>等待状态
        //Promise {<fulfilled>: undefined} =>成功
        //Promise {<rejected>: undefined} =>失败
        // 3、then方法

3)、resolve() reject() 参数

        const p2 = new Promise((resolve, resject) => {
            // resolve({name:"HI"})
            resject(new Error('失败元婴'))
        })
        p2.then((res) => {
            console.log(res)
        }, (res) => {
            console.log(res)
        })

二、Promise的实例方法

1、then方法

        p1.then(() => {
            console.log('成功') //成功
        }, () => {
            console.log('失败')
        })

1)、什么时候执行?

pending->fulfilled 时,执行 then的第一个回调函数
pending->rejected 时,执行 then的第二个回调函数

2)、执行后的返回值
then方法执行后返回一个新的Promise对象

       const p3 = new Promise((resolve, reject) => {
            resolve()
        })
        p3.then(() => {
        }, () => {
        }).then(() => {
        }, () => { })

3)、then方法返回的Promise对象的状态改变

        const p4 = new Promise((resolve, reject) => {
            resject(new Error('你失败'))
        })
        p4.then((res) => { }, () => {
            // 在then的回调函数中,return 后面的东西,底层会用Promise包装下,
            return { text: '给下一个then使用' }
            //  以上写法等同于
            return new Promise((resovle, reject) => {
                // 默认返回都是成功状态下的Promise对象
                resovle({ text: '给下一个then使用' })
            })


            // 注意如果你需要下一个then走失败:
            return new Promise((resolve, reject) => {
                reject('需要手动写失败')
            })

            console.log(res)
        }).then((res) => {
            console.log('第二个then:', res) //第二个then: {text: "给下一个then使用"}
        }, (res) => {
            console.log(res) //需要手动写失败
        })

个人总结:第一个then,根据Promise决定成功与失败,后续的then方法根据上一个then,决定
后面的then,默认执行的都是成功状态下Promise,需要手动写执行reject

2、使用Promise解决回调地狱问题

        const moveTwo = (el, { x = 0, y = 0 } = {}, end = () => { }) => {
            el.style.transform = `translate3d(${x}px,${y}px,0)`
            el.addEventListener('transitionend', () => {
                end()
            })
        }
        let BOX2 = document.getElementById('box2')
        const movePromise = ((el, point) => {
            return new Promise((resolve, reject) => {
                moveTwo(el, point, () => {
                    resolve();
                })
            })
        })
        document.addEventListener('click', () => {
            movePromise(BOX2, { x: 150 }).then(() => {
                return movePromise(BOX2, { y: 150 })
            }).then(_ => {
                return movePromise(BOX2, { x: 150 })
            })
        })

3、catch()

then可以处理成功失败状态,一般then习惯处理成功状态
catch专门用来处理rejected状态
基本用法:

        new Promise((resovle, reject) => {
            resovle(123)
        }).then(_ => {
            //throw 简写失败结果
            throw new Error('9999')
        })
            .then((null,err=>{})) // 同下
            .catch(err => {
                console.log(err)
            })
  catch()可以捕获它前面的错误,
  一般总是建议, Promise对象后面要眼catch方法,这样可以处理Promise内部发生的错误

4、了解finally()

什么时候执行?:当Promise状态发生变化时,不论如何变化都会执行,不变化不执行
本质: finally()本质上是then的特例

        new Promise((resovle, reject) => {
            reject(11)
        }).catch(_ => {
            console.log(_)
        }).finally(_ => {
            // 每次都执行
        })

三、 Promise 的构造函数方法

1、Promise.resolve()和Promise.reject()

1)Promise.resolve()是成功状态的一种简写是形式

        new Promise(resolve => { })
        // 简写:
        Promise.resolve('f

2)Promise.resolve参数
一般参数

   Promise.resolve('我是成功状态,哈哈哈哈哈哈哈').then(res => { console.log(res) })在这里插入代码片

Promise参数

        const pN = new Promise((resolve, reject) => {
            // setTimeout(() => {
            //     resolve('我在1000秒后执行')
            // }, 1000);
            setTimeout(resolve, 1000, '我在1000秒后执行');
        })

        Promise.resolve(pN).then(data => {
            console.log(data) //我在1000秒后执行
        })
        // 等同于
        pN.then(data => {
            console.log(data) //我在1000秒后执行
        })

当resolve’函数接收的是Promise对象时,后面的then会根据传递的Promise对象的状态变化决定执行哪一个回调

        new Promise(resovle => resovle(pN)).then(data => {
            console.log(data) //我在1000秒后执行
        })

具有then方法的对象

        const thenable = {
            then() {
                console.log('我是then,在对对象中')
            }
        }
        Promise.resolve(thenable).then(sus => console.log(sus), err => console.log(err))
        console.warn(Promise.resolve(thenable), '标记') //Promise {<pending>}[[Prototype]]: Promisecatch: ƒ catch()constructor: ƒ Promise()finally: ƒ finally()then: ƒ then()Symbol(Symbol.toStringTag): "Promise"[[Prototype]]: Object[[PromiseState]]: "pending"[[PromiseResult]]: undefined "标记"

2)Promise.reject()
失败状态Promise的一种简写形式
基本语法:

        new Promise((resolve, reject) => {
            reject('失败')
        })
        //  等同于
        Promise.reject('失败')

参数:不管什么参数,都会原封不动地向后传递,作为后续方法的参数

        const ps = new Promise(resolve => {
            setTimeout(resolve, 1000, '我执行l');
        })
        Promise.reject(ps).catch(err => console.log(ps)) //Promise实例

2、执行流程方法

        new Promise((resolve, reject) => {
            resolve('哈哈')
        }).then(res => {
            //   执行成功的三种写法
            return '成功'
            return new Promise(resolve => resolve('成功'))
            return Promise.resovle('成功')
            //   执行失败的三种写法
            throw '失败'
            return new Promise((resolve, reject) => reject('失败'))
            return Promise.reject('失败')
        })

3、Promise.all()

Promise.all()关注多个Promise对象的的状态变化
传入多个Promise实例,包装成一个新的Promise 实例返回
基本用法

        const delay = ms => {
            return new Promise(resovle => { setTimeout(resovle, ms); })
        }
        const all1 = delay(1000).then(() => {
            console.log('all1我执行完成:')
            return 'all1在all方法中'
        })
        const all2 = delay(2000).then(() => {
            console.log('all2我执行完成:')
            throw 'all2在all方法中'
        })

        Promise.all([all1, all2]).then(res => {
            console.log(res) //[ "all1在all方法中","all2在all方法中"]
        }).catch(res => console.log('标记', res))

4、Promise.race()

Promise.race() 的状态取决于第一个完成的Promise实例对象如果第一个完成的成功了,那最终的就成功;如果第一个完成的失败了,那最终的就失败(赛跑,谁先执行返回谁)

        const delaytwo = ms => {
            return new Promise(resovle => { setTimeout(resovle, ms); })
        }
        const race1 = delaytwo(1000).then(() => {
            console.log('race1:')
            return 'race1在race方法中'
        })
        const race2 = delaytwo(2000).then(() => {
            console.log('race1')
            throw 'race2在race方法中'
        })
        Promise.race([all1, all2]).then(res => {
            console.log(res)
        }).catch(res => console.log(res))

5、Promise.allSettled()

  1. Promise.allSettled()的状态与传入的Promise 状态无关
  2. 永远都是成功的
  3. 它只会忠实的记录下各个Promise的表现(结果)
       const delaythree = ms => {
            return new Promise(resovle => { setTimeout(resovle, ms); })
        }
        const allSettled1 = delaythree(1000).then(() => {
            return 'allSettled1方法成功状态'
        })
        const allSettle2 = delaythree(2000).then(() => {
            throw 'allSettle2方法成功状态'
        })
        Promise.allSettled([allSettled1, allSettle2]).then(res => {
            console.log(res)  //(2) [{…}, {…}]
        })

四、Promise注意事项以及应用

1、Promise注意事项

     * resolve或reject执行后的代码
     * Promise.all/race/allSettled的参数问题
     * Promise.all/race/allSettled的错误处理

1.resolve或reject函数执行后的代码:推荐在调用resolve或reject函数的时候加上return,不再执行它们后面的代码

        new Promise((resolve, reject) => {
            return resolve('HHHHH')
        })

2.Promise.all/race/allSettled的参数问题//参数如果不是Promise数组, 会将不是Promise的数组元素转变成Promise对象

        Promise.all([1, 2, 3]).then(res => console.log(res)) //(3) [1, 2, 3]
        //等同于
        Promise.all([
            Promise.resolve(1),
            Promise.resolve(2),
            Promise.resolve(3)
        ]).then(res => console.log(res)) //[1, 2, 3]

3、任何可遍历的都可以作为参数

数组、字符串、Set.Map.NodeList.arguments
Promise.all(new Set([1, 2, 3])).then(res => console.log(res)) // [1, 2, 3]

2、Promise应用

图片异步加载

        const loadImgAsync = url => {
            return new Promise((resolve, reject) => {
                const img = new Image()
                img.onload = () => { resolve(img) }
                img.onerror = () => { reject('图片加载失败') }
                img.src = url
            })
        }
        const DOMimg = document.getElementById('img')
        loadImgAsync('https://finance-glb-mx.s3.us-west-2.amazonaws.com/upload/pro/i/202108/16301107832998634.jpg  ')
            .then(res => {
                console.log(res,7888888888888888888)
                DOMimg.src = res.src

            })
            .catch(res => console.log(res))


标签:resolve,console,log,res,笔记,学习,Promise,reject
来源: https://blog.csdn.net/qq_42113778/article/details/120271602

专注分享技术,共同学习,共同进步。侵权联系[admin#icode9.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有