多个异步任务嵌套的优化(Promise对象使用示例)

/**
 * AJAX-1请求
 *
 * @return {Promise} Promise对象
 */
function ajax1() {
    return new Promise(function (resolve, reject) {
        // 使用setTimeout()模拟AJAX耗时请求
        setTimeout(function () {
            console.log('[AJAX-1]请求完成');

            let response = {name: '张三'}; // 假设response为本次AJAX请求的响应结果

            resolve(response); // 将响应结果向下传递,即作为ajax2()的参数
        }, 1500);
    });
}


/**
 * AJAX-2请求
 *
 * @param args object AJAX-1请求的响应结果
 * @return {Promise} Promise对象
 */
function ajax2(args) {
    return new Promise(function (resolve, reject) {
        // 使用setTimeout()模拟AJAX耗时请求
        setTimeout(function () {
            console.log('[AJAX-2]请求完成');

            let response = {gender: '男'}; // 假设response为本次AJAX请求的响应结果

            // 附加本次AJAX请求的响应结果,将响应结果向下传递,即作为ajax3()的参数
            args.gender = response.gender;
            resolve(args);
        }, 1500);
    });
}


/**
 * AJAX-3请求
 *
 * @param args object AJAX-2请求的响应结果
 * @return {Promise} Promise对象
 */
function ajax3(args) {
    return new Promise(function (resolve, reject) {
        // 使用setTimeout()模拟AJAX耗时请求
        setTimeout(function () {
            console.log('[AJAX-3]请求完成');

            let response = {age: 18}; // 假设response为本次AJAX请求的响应结果

            // 附加本次AJAX请求的响应结果,将响应结果向下传递,即作为final()的参数
            args.age = response.age;
            resolve(args);
        }, 1500);
    });
}


/**
 * 最终处理函数
 *
 * @param response object AJAX-3请求的响应结果
 */
function final(response) {
    let name = response.name;
    let gender = response.gender;
    let age = response.age;

    console.log('俺叫%s(%s),今年%d岁。', name, gender, age);
}


// 在下面的链式调用中,final()依赖ajax3()的响应结果,ajax3()依赖ajax2()的响应结果,ajax2()依赖ajax1()的响应结果
ajax1().then(ajax2).then(ajax3).then(final);


//========== 输出结果·开始 ==========//
// [AJAX-1]请求完成
// [AJAX-2]请求完成
// [AJAX-3]请求完成
// 俺叫张三(男),今年18岁。
//========== 输出结果·结束 ==========//


//========== 总结 ==========//
// 1、在处理包含多个异步任务的流程中,经常会遇到下一个任务的参数是其上一个任务的返回值的情况,也就是形成了依赖关系,
//    这种情况虽然可以通过层层嵌套的方式来编写代码,但是这样的代码可读性会变得很差,维护也会很麻烦,而使用Promise对
//    象就可以避免多层代码嵌套的问题。

Copyright © 2024 码农人生. All Rights Reserved