await原理笔记

awit的原理

``
`

//模拟请求 const query = (interval) => { return new Promise(resolve => { setTimeout(() => { resolve(interval) }, interval); }) }

    //串行发送三个请求

    //then链写法
    query(1000).then(value => {
        console.log("第一个成功",value);
        return query(2000);
    }).then(value => {
        console.log("第二个成功",value);
        return query(3000)
    }).then(value => {
        console.log("第三个成功",value);
        return query(3000)
    })


    // async await写法
    (async () => {
        let result = await query(1000)
        console.log("第1次成功", `结果是${result}`);

        result = await query(2000)
        console.log("第2次成功", `结果是${result}`);

        result = await query(1000)
        console.log("第3次成功", `结果是${result}`);
    })()

    //直接通过generator来写，会有多层嵌套，很麻烦
    let itor = generator()
    itor.next().value.next().then(val => {
        itor.next(val).value.then(val => {
            itor.next(val).value.then(val => {
                itor.next(val);
            })
        })
    })

    //判断promise对象的方法
    const isPromise = (x) => {
        if (x !== null && /^(object|function)$/i.test(typeof x)) {
            var then;
            try {
                then = x.then();
            } catch (_) {
                return false;
            }
            if (typeof then === "function") return true;
        }
        return false;
    }



    //实现await的功能，串行发送请求
    const asyncFunction = (generator, ...params) => {
        return new Promise((resolve, reject) => {
            let itor = generator(...params);
            const next = (val) => {
                let { value, done } = itor.next(val);
                if (done) {
                    resolve(value)
                    return;
                }
                if (!isPromise(value)) value = Promise.resolve(value)
                value.then(val => next(val)).catch(reason => {
                    reject(reason)
                    itor.throw(reason)
                }
                )
            }
            next()
        })
    }

`