怎样用JavaScript处理Promise的链式调用？

Promise的链式调用是通过在then方法返回一个新的Promise实例，从而实现多个异步操作按顺序执行的效果，这是JavaScript处理异步流程的重要方式。

Promise链式调用的基本语法

每个Promise实例的then方法执行后会返回一个新的Promise，因此可以直接在then后面继续调用then，形成链式结构。基础的使用方式如下：

// 创建一个初始Promise，模拟异步操作
const promise = new Promise((resolve, reject) => {
    setTimeout(() => {
        resolve('第一步操作完成');
    }, 1000);
});

// 链式调用then方法
promise
    .then(result => {
        console.log(result); // 输出：第一步操作完成
        return '第二步操作的参数';
    })
    .then(result => {
        console.log(result); // 输出：第二步操作的参数
        return '第三步操作的参数';
    })
    .then(result => {
        console.log(result); // 输出：第三步操作的参数
    });

链式调用中返回值的处理规则

then方法的回调函数返回值会决定下一个then接收到的参数，具体规则如下：

• 如果返回的是普通值（字符串、数字、对象等），下一个then会直接接收到这个值
• 如果返回的是一个新的Promise实例，下一个then会等待这个Promise的状态变化后再执行
• 如果抛出异常，链式调用会跳转到最近的catch方法捕获错误

以下是一个返回Promise的链式调用示例：

function asyncTask(name, delay) {
    return new Promise(resolve => {
        setTimeout(() => {
            resolve(`${name}完成，耗时${delay}ms`);
        }, delay);
    });
}

asyncTask('任务A', 1000)
    .then(result => {
        console.log(result); // 输出：任务A完成，耗时1000ms
        // 返回新的Promise，下一个then会等待这个Promise完成
        return asyncTask('任务B', 1500);
    })
    .then(result => {
        console.log(result); // 输出：任务B完成，耗时1500ms
        return { status: 'success', data: result };
    })
    .then(result => {
        console.log(result); // 输出：{ status: 'success', data: '任务B完成，耗时1500ms' }
    });

链式调用中的错误捕获

Promise链式调用的错误可以通过catch方法统一捕获，无论是前面的then中抛出异常，还是Promise本身被reject，都会被catch捕获。

const errorPromise = new Promise((resolve, reject) => {
    setTimeout(() => {
        reject('操作失败，参数错误');
    }, 800);
});

errorPromise
    .then(result => {
        console.log(result);
        return '下一步';
    })
    .then(result => {
        console.log(result);
    })
    .catch(error => {
        console.log('捕获到错误：', error); // 输出：捕获到错误：操作失败，参数错误
    });

也可以在then的第二个参数中捕获当前Promise的错误，但是这种方式无法捕获后面then抛出的错误，因此更推荐使用末尾的catch统一处理。

实际应用场景示例

假设我们需要按顺序请求三个接口，前一个接口的返回值是后一个接口的参数，使用Promise链式调用可以这样实现：

// 模拟接口请求函数
function requestApi(url, params) {
    return new Promise(resolve => {
        setTimeout(() => {
            resolve(`请求${url}成功，参数：${JSON.stringify(params)}`);
        }, 500);
    });
}

requestApi('/api/user', { id: 1 })
    .then(res => {
        console.log(res); // 输出：请求/api/user成功，参数：{"id":1}
        // 用第一个接口的结果作为参数请求第二个接口
        return requestApi('/api/order', { userId: 1 });
    })
    .then(res => {
        console.log(res); // 输出：请求/api/order成功，参数：{"userId":1}
        // 用第二个接口的结果请求第三个接口
        return requestApi('/api/goods', { orderId: 1001 });
    })
    .then(res => {
        console.log(res); // 输出：请求/api/goods成功，参数：{"orderId":1001}
    })
    .catch(error => {
        console.log('请求出错：', error);
    });

注意事项

在使用Promise链式调用时，需要注意不要忘记返回Promise或者普通值，如果then回调没有返回值，下一个then接收到的参数会是undefined。另外，尽量避免在链式调用中嵌套新的Promise链式调用，否则会失去链式调用的可读性优势。

Promise链式调用的核心是利用then方法返回新Promise的特性，合理处理返回值和错误，就能写出清晰的异步流程代码。

PromiseJavaScript链式调用then方法修改时间：2026-06-05 02:19:33