promise笔记

发表于 分类于 阅读次数： Changyan： 本文字数： 3.5k 阅读时长 ≈ 6 分钟

Porimise.resolve(obj) Promise.reject(obj)

  1. obj是非Promise对象,其状态PromiseState一定是 fulfilled
  2. obj是Promise对象, 则根据obj的状态PromiseState是 fulfilled或 rejected 来决定整体的
  3. resolve或 reject 本质是把 PromiseState 从 pending –> fulfilled/ rejected
  4. 状态不为pending 就会调用then
1
2
3
4
5
const p = Promise.resolve(
    new Promise((resolve, reject) => {
        reject("ok!");
    })
);
1
2
3
4
5
6
7
8
console.log(p)
/*
Promise
[[Prototype]]: Promise
[[PromiseState]]: "rejected"
[[PromiseResult]]: "ok!"
Uncaught (in promise) ok!
/*
1
2
3
4
5
6
7
8
9
10
11
12
13
//方式一：
p.then((res) => {
    console.log("res",res);
}, (err)=> {
    console.log("err",err)
})
//方式二：
p.then((res) => {
    console.log("res",res);
    }).catch(err=> {
        console.log("err",err)
    })
//err ok!

Promise.all(Promise[])

一次性执行多个异步,返回数组

1
2
3
4
5
6
7
8
9
const p1 = Promise.resolve('p1');
const p2 = Promise.resolve('p2')
const p3 = Promise.resolve('p3');
Promise.all([p1,p2,p3]).then(results=> {
    console.log(results)
}).catch(errs=> {
    console.log(errs)
})
// ['p1', 'p2', 'p3']
1
2
3
4
5
//如果是
const p1 = Promise.resolve('p1');
const p2 = Promise.reject('p2')
const p3 = Promise.resolve('p3');
//只输出p2， 因为运行到p2就直接捕获错误了，

Promise.race(Promise[])

返回遇到的第一个状态转为成功的promise对象

1
2
3
4
5
6
7
const a1 = Promise.reject("a1");
const a2 = Promise.resolve("a2");
const a3 = Promise.resolve("a3"); 
const a = Promise.race([a1,a2,a3])
console.log(a) 
//Promise{PromiseState:'rejected', PromiseResult:'a1'}
//Uncaught (in promise) a1
1
2
3
4
5
6
const a1 = Promise.reject("a1").catch(); //处理a1的报错
const a2 = Promise.resolve("a2");
const a3 = Promise.resolve("a3"); 
const a = Promise.race([a1,a2,a3])
console.log(a) 
//Promise{PromiseState:'fulfilled', PromiseResult:'a2'} 顺利返回a2

.then()链式调用

1
2
3
4
5
6
7
8
9
10
11
12
13
14
const p = new Promise((resolve, reject) => {
    resolve("resolve");
})
p.then(result => {
    console.log(result) //输出 resolve
}).then(res => {
    console.log(res) // 输出 undefined
    return new Promise((resolve, rejedct) => {
    resolve('resolve2')
    })
}).then(res => {
    console.log(res) // 输出 resolve2
    return Promise.reject('reject')
}).catch(err=>console.log(err)) //输出 reject

异常穿透

1
2
3
4
5
6
7
8
9
10
11
12
const p = Promise.resolve('p')
p.then(result => {
    console.log(result)// 输出 p
}).then(res => {
    console.log(res) // 输出 undefined
    return Promise.reject("reject 1") //返回状态rejected，直接跳过后面所有then进入catch ！！！
}).then(res => {
    console.log('执行了') // 不输出
    return Promise.reject("reject 2") //第二个错误也不会理会
}).catch(err => {
    console.log("err", err) // 只输出 reject 1
})

中断链式调用

当PromiseState: pending时，不会进入then()

1
2
3
4
5
6
7
8
new Promise(resolve => {
    resolve("hello")
}).then(res => {
    console.log("then")
    return new Promise(() => { }) //返回状态为pending的Promise对象
}).then(res => { 
    console.log("then2") //不输出
})

async & await

async

  1. async 返回Promise对象
  2. async function fn(){} 返回结果由fn的结果决定

await

  1. 右边一般是Promise对象
  2. 如果表达式是Promise对象, 返回Promise成功的值
  3. 如果表达式是其他值,直接返回

注意: i. await必须写在async中
ii. await右边promise失败（状态为rejected）会抛出异常,需要用try catch
iii. await 不可以在文件顶层使用（用立即执行函数包裹）

1
2
3
4
5
6
7
8
9
10
11
(async function () {
    let asyncFn2 =  function () {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
        console.log('timeout')
        resolve('ok')
        }, 1500);
    })
    } 
    console.log(await asyncFn2())
})()