手撕Promise 和async await的原理

最新推荐文章于 2024-04-19 23:30:25 发布

东哥爱编程

最新推荐文章于 2024-04-19 23:30:25 发布

阅读量171

点赞数

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

本文链接：https://blog.csdn.net/monk96/article/details/126280161

版权

js 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

// // 当调用一个 async 函数时，会返回一个 Promise 对象 (关键)
// // async/await 出现的异常是无法捕获的，需要借助 try/catch 来捕获异常
// function sleep(flag) {
//     return new Promise((resolve, reject) => {
//         setTimeout(() => {
//             if(flag){
//                 resolve('success')
//             }else{
//                 reject('Error')
//             }
//         }, 2000)
//     })
// }

// // async await 的用法
// async function fn(flag) {
//     try {
//         let result = await sleep(flag)
//         console.log(result);
//         return result
//     } catch (err) {
//         return err
//     }
// }
// // 返回的 a,b 是一个 promise 对象
// var a = fn(true)
// var b = fn(false)
// console.log(a)
// console.log(b)
// a.then((res)=>{
//     // console.log(res) // success
// })
// b.then((res)=>{
//     // console.log(res) // Error
// })
function* gen() {
    console.log('start');
    const num1: number = yield 3;
    console.log(num1);
    const num2: number = yield 2;
    console.log(num2);
    return 3;
}
const g = gen();


function asyncGenerator(generatorFn) {
    return function() {
        const fn = generatorFn.apply(this, arguments);
        return new Promise((resolve, reject) => {
            function go(key, args?) {
                let res;
                try {
                    res = fn[key](args);
                } catch (error) {
                    return reject(error);
                }
                let {value, done} = res;
                if(done) {
                    return resolve(value)
                } else {
                    Promise.resolve(value).then(data => go('next', value)).catch(err => go('throw', err));
                }
            }
            go('next');
        })
    }
}

const asyncFn = asyncGenerator(gen)
asyncFn().then(res => console.log(res))