Promise链式调用

Promise链式调用的基本概念

Promise链式调用是ECMAScript 6中处理异步操作的核心特性之一。它允许开发者以顺序方式组织异步代码，避免了传统回调函数带来的"回调地狱"问题。Promise链通过then()方法连接多个异步操作，每个then()接收前一个Promise的解决值，并返回一个新的Promise。

fetch('/api/data')
  .then(response => response.json())
  .then(data => processData(data))
  .then(result => displayResult(result))
  .catch(error => handleError(error));

Promise链的工作原理

Promise链的核心在于then()方法的返回值机制。每次调用then()都会创建一个新的Promise对象，这个新Promise的状态取决于回调函数的执行结果：

1. 如果回调函数返回普通值，新Promise会立即以该值解决
2. 如果回调函数返回Promise，新Promise会"跟随"这个返回的Promise
3. 如果回调函数抛出异常，新Promise会以该异常拒绝

const promise = new Promise((resolve) => resolve(1));

promise
  .then(value => {
    console.log(value); // 1
    return value + 1;
  })
  .then(value => {
    console.log(value); // 2
    return Promise.resolve(value + 1);
  })
  .then(value => {
    console.log(value); // 3
    throw new Error('Something went wrong');
  })
  .catch(error => {
    console.error(error.message); // "Something went wrong"
  });

错误处理策略

Promise链中的错误处理主要通过catch()方法实现，它具有以下特点：

• catch()会捕获链中任何位置发生的错误
• 可以在链的末尾使用单个catch()处理所有错误
• catch()本身返回一个新的Promise，允许继续链式调用

fetch('/api/data')
  .then(response => {
    if (!response.ok) {
      throw new Error('Network response was not ok');
    }
    return response.json();
  })
  .then(data => {
    if (!data.valid) {
      throw new Error('Invalid data format');
    }
    return processComplexData(data);
  })
  .catch(error => {
    console.error('Error in processing chain:', error);
    return getFallbackData(); // 提供回退数据
  })
  .then(finalData => {
    // 无论前面成功还是失败(但有回退)，都会执行这里
    renderUI(finalData);
  });

高级链式模式

并行执行与顺序处理

结合Promise.all()可以在链中实现并行操作：

function getUserProfile(userId) {
  return fetchUser(userId)
    .then(user => {
      return Promise.all([
        user,
        fetchFriends(user.id),
        fetchPosts(user.id)
      ]);
    })
    .then(([user, friends, posts]) => {
      return {
        ...user,
        friends,
        posts
      };
    });
}

条件链式调用

根据前一步结果决定是否执行某些步骤：

function loadContent(preferCache) {
  return checkCache()
    .then(cachedData => {
      if (cachedData && preferCache) {
        return cachedData;
      }
      return fetchFreshData()
        .then(data => {
          return updateCache(data);
        });
    });
}

Promise链的返回值处理

每个then()回调的返回值会影响链的后续行为：

Promise.resolve()
  .then(() => {
    return '直接返回值';
  })
  .then(val => {
    console.log(val); // "直接返回值"
    return new Promise(resolve => {
      setTimeout(() => resolve('延迟值'), 1000);
    });
  })
  .then(val => {
    console.log(val); // 1秒后输出"延迟值"
    // 不返回任何值相当于返回undefined
  })
  .then(val => {
    console.log(val); // undefined
  });

实际应用场景示例

用户登录流程

function login(username, password) {
  return validateInput(username, password)
    .then(() => authenticate(username, password))
    .then(token => {
      return Promise.all([
        getUserProfile(token),
        getNotifications(token)
      ]);
    })
    .then(([profile, notifications]) => {
      return {
        profile,
        notifications,
        lastLogin: new Date()
      };
    })
    .then(userData => {
      return saveToSessionStorage(userData);
    });
}

数据预处理管道

function processDataPipeline(rawData) {
  return Promise.resolve(rawData)
    .then(data => validateDataStructure(data))
    .then(validData => cleanData(validData))
    .then(cleanData => transformData(cleanData))
    .then(transformedData => {
      return enrichData(transformedData);
    })
    .then(enrichedData => {
      return analyzeData(enrichedData);
    });
}

常见陷阱与最佳实践

忘记返回Promise

// 错误示例
somePromise
  .then(value => {
    anotherAsyncOperation(value); // 忘记return
  })
  .then(result => {
    // result会是undefined
  });

// 正确写法
somePromise
  .then(value => {
    return anotherAsyncOperation(value); // 显式返回
  })
  .then(result => {
    // 正确处理结果
  });

错误处理位置不当

// 可能不够完善的错误处理
doFirstThing()
  .then(doSecondThing)
  .catch(handleError) // 捕获后链会继续
  .then(doThirdThing); // 即使前面出错也会执行

// 更好的方式
doFirstThing()
  .then(doSecondThing)
  .then(doThirdThing)
  .catch(handleError); // 集中处理所有错误

Promise链的性能考虑

长Promise链可能带来微小的性能开销，但在大多数情况下可以忽略。对于性能敏感的场景：

// 多个独立操作可以并行
Promise.all([task1, task2, task3])
  .then(([result1, result2, result3]) => {
    // 合并处理结果
  });

// 替代长链式调用
asyncTask1()
  .then(combine1)
  .then(combine2)
  .then(combine3); // 可能创建多个微任务