Promise Generator Async初步理解（1）

一、立即执行函数

// 立即执行函数
function getInfo() {
    return 'I am Zhang';
}

function showInfo(param) {
    console.log(param)
}
showInfo(getInfo()) //I am Zhang

二、回调函数

//回调函数
function callback(param) {
    console.log('我是回调函数', param);
}

function myFun(param, callback) {
    setTimeout(() => {
        callback(param)
    }, 2000);
}
myFun('Gao', callback) //我是回调函数 Gao  两秒后

回调函数和promise写法对比: 

// 回调函数写法

function fun1(value, callback) {
    setTimeout(() => {
        value++;
        console.log('第一次回调' + value);
        // ----------
        setTimeout(() => {
            value++;
            console.log('第二次回调' + value);
            // ---------
            setTimeout(() => {
                value++;
                console.log('第三次回调' + value);
            }, 1000)
        }, 1000)
    }, 1000)
}
fun1(1)

// promise写法
function fn2(value) {
    return new Promise((resolve, reject) => {
        setTimeout(function(callback) {
            let result = value + 1;
            resolve(result)
        }, 1000);
    })
}
fn2(1).then((value) => {
    console.log("fn2的第一次调用", value)
    return fn2(value)
}).then((value) => {
    console.log("fn2的第二次调用", value)
    return fn2(value)
}).then((value) => {
    console.log("fn2的第三次调用", value)
    return fn2(value)
})

 

被作为实参传入另一函数，并在该外部函数内被调用，用以来完成某些任务的函数，称为回调函数     也就是说回调

Promise是什么？

Promise 是一个对象，它代表了一个异步操作的最终结果 (完成或失败)。
本质上Promise是一个函数返回的对象，我们可以把回调函数绑定到它上面，这样就不需要在一开始就把回调函数作为参数传入这个函数了。

函数是一个函数，作为 参数 传给另一个 JavaScript 函数，回调函数将会在这个函数执行完成后立即执行。回调函数是在传给的函数内部被调用执行的。

// 回调函数和promise
function SuccessCallback() {
    console.log('成功回调');
}

function FailCallback() {
    console.log('失败回调');
}

function myFun1(param, success, fail) {
    if (param) {
        success()
    } else {
        fail()
    }
}
myFun1(0, SuccessCallback, FailCallback); //失败回调

promise的形式

// Promise形式
function myPromise(param) {
    return new Promise((resolve, reject) => {
        if (param) {
            resolve()
        } else {
            reject()
        }
    })
}

myPromise(0).then(SuccessCallback, FailCallback) //失败回调

promise的链式调用 

function fun1(value) {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            let result = value + 1;
            resolve(result);
        }, 2000);
    })
}

fun1(0).then((value) => {
    console.log('第一次回调', value)
    return fun1(value)
}).then((value) => {
    console.log('第二次回调', value)
    return fun1(value)
}).then((value) => {
    console.log('第三次回调', value)
    return fun1(value)
})

// async函数写法
async function asy() {
    let v = 0;
    v = await fun1(v);
    console.log('async第一次回调', v)
    v = await fun1(v);
    console.log('async第二次回调', v)
    v = await fun1(v);
    console.log('async第三次回调', v)
}
asy()

// -----------------------------
// 运行结果：
// 第一次回调 1
// async第一次回调 1
// 第二次回调 2
// async第二次回调 2
// 第三次回调 3
// async第三次回调 3c第三次回调 3

Generator函数：

var pm = new Promise((resolve, reject) => {
    let num = 7;
    setTimeout(() => {
        if (num > 6) {
            resolve()
        } else {
            reject()
        }
    });
})
// Generator函数
function* gener() {
    yield 'hello';
    yield 'gao';
    yield 'jia';
    yield 'hui';

}
var res = gener();
console.log(res.next());
console.log(res.next());
console.log(res.next());
console.log(res.next());
console.log(res.next());
// 运行结果：
// value: 'hello', done: false }
// { value: 'gao', done: false }
// { value: 'jia', done: false }
// { value: 'hui', done: false }
// { value: undefined, done: true }

yield

遍历器对象的next方法的运行逻辑如下:

（1）遇到yield语句，就暂停执行后面的操作，并将紧跟在yield后面的那个表达式的值，作为返回的对象的value属性值。

（2）下一次调用next方法时，再继续往下执行，直到遇到下一个yield语句。

（3）如果没有再遇到新的yield语句，就一直运行到函数结束，直到return语句为止，并将return语句后面的表达式的值，作为返回的对象的value属性值。

（4）如果该函数没有return语句，则返回的对象的value属性值为undefined。

注意，yield句本身没有返回值，或者说总是返回undefined。

next方法可以带一个参数，该参数就会被当作上一个yield语句的返回值。

三者联系： 

function fn() {
    return new Promise((resolve, reject) => {
        let num = 8;
        if (num > 9) {
            resolve('大于10')
        } else {
            reject('小于9啦')
        }
    })
}
// ---------------------------
// Generator函数形式
function* gen() {
    try {
        let text = yield fn();
        console.log(text)
    } catch (err) {
        console.log(err)
    }
}
let it = gen();
let p = it.next().value;
console.log(p) //Promise { <rejected> '小于9啦' }  ||   Promise { '成功' }
p.then(
    function(res) {
        it.next(res)
    },
    function(err) {
        it.throw(err) //大于10
    })
// ------------------------------
// async函数形式
async function asy() {
    let v = await fn();
    console.log(v) //大于10
}
asy()

 

 

 参考：前端基础进阶（十五）：透彻掌握Promise的使用，读这篇就够了 - 简书

ES6中的Promise和Generator详解 - 简书

promise,Generator函数，async函数区别与理解_有问题 ! 请留言 !-CSDN博客_generator和promise的区别

看了就懂的Promise和回调函数_小天才程序员的博客乐园-CSDN博客 

Generator与Promise的完美结合 -- async await函数诞生记_weixin_33695450的博客-CSDN博客