使用 setTimeout 实现异步，通过函数执行顺序、回调函数、promise 对象、async 和 await 来控制异步走向

1. 函数执行顺序

使用 setTimeout 实现异步，通过 函数执行顺序 来控制异步走向

const a = function () {
    console.log('我是a的执行程序');
    const resultA = '我是a的执行结果'
    setTimeout(function () { b(resultA) }, 1000)

}
const b = function (a_result) {
    console.log('我是b的执行程序');
    const resultB = '我是b的执行结果' + ' + ' + a_result
    console.log(resultB);
    setTimeout(function () { c(resultB) }, 1000)
}
const c = function (b_result) {
    console.log('我是c的执行程序');
    const resultC = '我是c的执行结果' + ' + ' + b_result
    console.log(resultC);
}
a()

// 结果：
// 我是a的执行程序
// 我是a的执行结果
// 我是b的执行程序
// 我是b的执行结果 + 我是a的执行结果
// 我是c的执行程序
// 我是c的执行结果 + 我是b的执行结果 + 我是a的执行结果

2. 回调函数

使用 setTimeout 实现异步，通过 回调函数 来控制异步走向

const a = function (cb) {
    console.log('我是a的执行程序');
    const resultA = '我是a的执行结果'
    setTimeout(() => { cb(resultA) }, 1000);
}
const b = function (a_result, cb) {
    console.log('我是b的执行程序');
    const resultB = '我是b的执行结果' + ' + ' + a_result
    setTimeout(() => { cb(resultB) }, 1000);
}
const c = function (b_result, cb) {
    console.log('我是c的执行程序');
    const resultC = '我是c的执行结果' + ' + ' + b_result
    setTimeout(() => { cb(resultC) }, 1000);

}
a((a) => {
    console.log(a);
    b(a, (b) => {
        console.log(b);
        c(b, (c) => {
            console.log(c);
        })
    })
})

// 结果：
// 我是a的执行程序
// 我是a的执行结果
// 我是b的执行程序
// 我是b的执行结果 + 我是a的执行结果
// 我是c的执行程序
// 我是c的执行结果 + 我是b的执行结果 + 我是a的执行结果

3. promise 对象

使用 setTimeout 实现异步，通过 promise 对象 来控制异步走向

const a = function () {
    console.log('我是a的执行程序');
    return new Promise((resolve) => {
        const resultA = '我是a的执行结果'
        setTimeout(() => { resolve(resultA) }, 1000);
    })
}
const b = function (a_result) {
    console.log('我是b的执行程序');
    return new Promise((resolve) => {
        const resultB = '我是b的执行结果' + ' + ' + a_result
        setTimeout(() => { resolve(resultB) }, 1000);


    })
}
const c = function (b_result) {
    console.log('我是c的执行程序');
    return new Promise((resolve) => {
        const resultC = '我是c的执行结果' + ' + ' + b_result
        setTimeout(() => { resolve(resultC) }, 1000);

    })
}

// 类似回调函数写法
a().then((a) => {
    console.log(a);
    b(a).then((b) => {
        console.log(b);
        c(b).then((c) => {
            console.log(c);
        })
    })
})

// promise 特性写法
a().then((a) => {
    console.log(a);
    return b(a)
}).then((b) => {
    console.log(b);
    return c(b)
}).then((c) => {
    return console.log(c);
})

// 结果
// 我是a的执行程序
// 我是a的执行结果
// 我是b的执行程序
// 我是b的执行结果 + 我是a的执行结果
// 我是c的执行程序
// 我是c的执行结果 + 我是b的执行结果 + 我是a的执行结果

4. async 和 await

使用 setTimeout 实现异步，async 和 awai 来控制异步走向

const a = function () {
    console.log('我是a的执行程序');
    return new Promise((resolve) => {
        const resultA = '我是a的执行结果'
        setTimeout(() => {
            resolve(resultA)
        }, 1000);

    })
}
const b = function (a_result) {
    console.log('我是b的执行程序');
    return new Promise((resolve) => {
        const resultB = '我是b的执行结果' + ' + ' + a_result
        setTimeout(() => {
            resolve(resultB)
        }, 1000);
    })
}
const c = async function () {
    const resultA = await a()
    console.log(resultA);

    const resultB = await b(resultA)
    console.log(resultB);

    console.log('我是c的执行程序');
    const resultC = '我是c的执行结果' + ' + ' + resultB
    console.log(resultC);
}
c()

// 结果
// 我是a的执行程序
// 我是a的执行结果
// 我是b的执行程序
// 我是b的执行结果 + 我是a的执行结果
// 我是c的执行程序
// 我是c的执行结果 + 我是b的执行结果 + 我是a的执行结果