/** * 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