前序块不返回Promise时可调用then()吗？如何优雅顺序执行异步函数

1. 非Promise返回值能否调用then()方法 #

不可以。then()是仅属于Promise实例的原型方法，若调用函数的返回值为普通数据类型（如你示例中的字符串、null等），直接调用.then()会立即抛出类型错误：Uncaught TypeError: xxx.then is not a function。

额外注意：你当前示例中的myGET和myPOST写法存在逻辑问题，fetch本身是异步API，你直接在函数内同步return变量str，永远只能拿到初始的null，无法获取异步请求的返回结果。

2. 异步函数串行执行的优雅实现 #

首先需要将两个异步函数改造为返回Promise的形式，这是所有异步流程控制的基础：

function myGET() {
  return fetch('/你的GET请求地址')
    .then(response => response.text())
    .catch(() => null);
}

function myPOST(value) {
  return fetch('/你的POST请求地址', {
    method: 'POST',
    body: value
  })
    .then(response => response.text())
    .catch(() => null);
}

方案1：async/await语法（最高可读性，优先推荐） #

ES7引入的async/await语法可以让异步代码的书写逻辑和同步代码完全一致，无需嵌套.then()，可维护性极强：

// 可复用的串行执行函数
async function execSerialTasks() {
  const getResult = await myGET();
  if (getResult === null) return;
  const postResult = await myPOST(getResult);
  console.log(postResult);
}

// 直接调用即可执行
execSerialTasks();

如果后续需要新增串行执行的异步任务，仅需按顺序添加await调用即可，无需调整原有结构。

方案2：通用串行任务工具（适合动态任务列表场景） #

如果你的异步任务数量不固定、需要动态传入，可以封装通用的串行执行工具，无需为每个业务场景单独写执行逻辑：

/**
 * 串行执行异步任务列表
 * @param {Array<(...args) => Promise>} taskList 任务数组，每个项为返回Promise的函数
 * @param {boolean} breakOnNull 遇到null返回值时是否中断后续执行，默认开启
 * @returns {Promise<Array>} 所有任务的返回值数组
 */
async function runSerialTasks(taskList, breakOnNull = true) {
  const resultList = [];
  for (let i = 0; i < taskList.length; i++) {
    const currentResult = await taskList[i](resultList);
    if (breakOnNull && currentResult === null) break;
    resultList.push(currentResult);
  }
  return resultList;
}

// 业务侧使用示例
runSerialTasks([
  myGET,
  // 透传前序结果作为参数
  (prevResults) => myPOST(prevResults[0])
]).then(finalResults => {
  console.log('执行结果：', finalResults);
});

内容的提问来源于stack exchange，提问作者noob_coder