Promise的关键理解与使用事项

前瞻

  • promise解决回调地狱。

    回调地狱扁平化为promise的链式调用：then无穷返回一个promise实例

  • 实现简单promise

参考材料

  • 掘金文章-刷题 https://juejin.cn/post/6844904077537574919#heading-50
  • 回调与Promise的代码层级比较 https://www.youtube.com/watch?v=DHvZLI7Db8E&t=615s

promise使用

  1. 生成一个promise
  2. promise实例生成以后，可以用then方法指定resolved状态或rejected状态的回调函数

e.g.

function cook(stage) {
    return new Promise((resolve, reject) => {
        setTimeout(()=>{
            resolve(stage) 
        },2000)
    })
}

console.log(`开始`)
cook('买菜').then((value) => cook(value + '胡萝卜'))
.then((data2) => {
    console.log(data2,'微任务队列清空')
})
console.log('script结束')

复制成功
1
2
3
4
5
6
7
8
9
10
11
12
13
14

e.g.

function cook(stage) {
    return new Promise((resolve, reject) => {
        setTimeout(()=>{
            reject(new Error('钱不够')) 
        },2000)
    })
}

console.log(`开始`)
cook('买菜').then((data) => {
    console.log('none')
},(error) => {
    console.er
})
console.log('script结束')

复制成功
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

补充

e.g.0 浏览器时序

  1. 执行全篇script (第一次宏任务)
    • new Promise中传入函数属于script
    • 如未resovle, Promise<pending>，则对应then函数不放入微任务队列
    • 如resolve, Promise<resolved>,则入队微任务队列
      • 如遇定时器，则对应定时器函数入队宏任务队列
  2. 清空微任务队列
  3. 执行一次宏任务

更多：

  • https://juejin.cn/post/6844904077537574919#heading-50

e.g.1 一秒后打印1，打印1之后两秒打印2，打印2之后三秒后打印3

// test driven - v1.
print(1).then(()=>print(2)).then(()=>print(3))

// 实现
const print = (interval) => {
    return new Promise( resolve => {
        setTimeout(() => {
           console.log(interval)
            resolve()
        },interval * 1000)
    })
}

复制成功
1
2
3
4
5
6
7
8
9
10
11
12

image-20220331121521802`

//test driven - v2.1
print(1, 1).then( data1 => {
    console.log(data1)
    return print(2,2)
}).then(data2 => {
    console.log(data2)
	// ... return print(3,3)
})

//实现
let print = (data, delayTime) => {
    return new Promise(resolve => {
        setTimeout(()=>{
            resolve(data)
        },delayTime *1000)
    })
}

复制成功
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
// test driven - v2.2
(async () => {
    let data1 = await print(1, 1)
    console.log(data1)
	let data2 = await print(2, 2)
    console.log(data2)
	let data3 = await print(3, 3)
    console.log(data3)
})()
// 实现
let print = (data, delayTime) => {
    return new Promise(resolve => {
        setTimeout(()=>{
            resolve(data)
        },delayTime *1000)
    })
}

复制成功
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

Promise.race && Promise.all

待定

手写Promise

晓露寝安浅云逍遥十漾轻拟