JS 进阶知识

最新推荐文章于 2024-05-23 08:44:45 发布

喻先生_

最新推荐文章于 2024-05-23 08:44:45 发布

阅读量164

点赞数

分类专栏：前端文章标签： javascript

本文链接：https://blog.csdn.net/weixin_49757069/article/details/118268829

版权

前端专栏收录该内容

28 篇文章 0 订阅

订阅专栏

Promise

promise 三种状态

1.pending、resolved(fulfilled)、 rejected
2.pending --> resolved(fulfilled) 或者 pending --> rejected
3.变化不可逆

状态的表现

1.pending 状态，不会触发 then 和 catch
2.resolved(fulfilled) 状态，会触发后续的 then 回调函数
3.rejected 状态，会触发后续的 catch 回调函数

then 和 catch 改变状态

1.then 正常返回 resolved(fulfilled)，里面有报错则返回 rejected（指抛出错误）
2.catch 正常返回 resolved(fulfilled)，里面有报错则返回rejected（指抛出错误）

Promise.resolve().then(() => {
    console.log(1);  // 1
    // 执行完 then 回调函数没有报错，正常返回 resolved(fulfilled)
}).catch(() => {
    console.log(2);
}).then(() => {
    console.log(3);  // 3
    // 执行完 then 回调函数没有报错，正常返回 resolved(fulfilled)
})

Promise.resolve().then(() => {
    console.log(1);  // 1

    // 有报错则返回 rejected 状态
    throw new Error('erro1')
}).catch(() => {
    console.log(2);  // 2
    // 执行完 catch 回调函数没有报错，正常返回 resolved(fulfilled)
}).then(() => {
    console.log(3);  // 3 
    // 执行完 then 回调函数没有报错，正常返回 resolved(fulfilled)
})

Promise.resolve().then(() => {
    console.log(1);  // 1

    // 有报错则返回 rejected 状态
    throw new Error('erro1')
}).catch(() => {
    console.log(2);  // 2
    // 执行完 catch 回调函数没有报错，正常返回 resolved(fulfilled)
}).catch(() => {
    console.log(3);
})

async/await

异步回调容易导致 callback hell
Promise then catch 链式调用虽把层级铺开，但也是基于回调函数
async/await 是同步语法，彻底消灭回调函数

async/await 和 Promise 的关系

执行 async 函数，返回的是 Promise 对象
await 相当于 Promise 的 then，await 的后面都可以看做是 callback 里的内容，即异步
try…catch 可捕获异常，代替了 Promise 的 catch

async function fn2(){
	retrun 200
}

const res1 = fn2()  // 执行 async 函数，返回的是一个 Promise 对象
console.log('res1', res1);  // Promise 对象
res1.then( data =>{
    console.log('data', data);  // 200
})

(async function(){
    const p1 = Promise.resolve(300)
    const data = await p1  // await 相当于 Promise.then
    console.log('data', data)  // 300
})()

(async function(){
    const data1 = await 400  // await Promise.resolve(400)
    console.log('data1', data1);  // 400
})()

(async function(){
    const data2 = await fn2()
    console.log('data2', data2 ); // 200
})()

(async function(){
    const p3 = Promise.reject('err3')  // rejected 状态

    // 此时因为 await 相当于 Promise.then，而 p3 为 reject 状态，故这里会报错
    const res = await p3
    console.log(res);
})()

// try...catch 相当于 Promise catch
(async function(){
    const p4 = Promise.reject('err4')  // rejected 状态
    try {
        // 此时因为 await 相当于 Promise.then，而 p4 为 reject 状态，故这里会报错,进入 catch
        const res = await p4
        console.log(res);
    } catch (error) {
        console.log(error);  // err4
    }
})()