如何在Code by Zapier中用Javascript实现多个fetch请求顺序执行

问题根源 #

1. 你在第一个fetch的.then()回调中直接调用了callback()，Code by Zapier只要执行到callback就会立即终止当前动作，后续逻辑完全不会运行
2. fetch是异步API，你当前的同步写法不会等待第一个请求返回结果，就会直接执行第二个请求的代码，此时user.result还没有拿到创建用户返回的ID，第二个请求的URL本身就是无效的

解决方案 #

推荐使用async/await语法实现请求按顺序执行，所有请求完成后再统一调用一次callback即可，示例代码如下：

const headers = {
  "Authorization": "Bearer 替换为你自己的实际接口凭证",
  "Content-Type": "application/json"
};
const baseUrl = "https://us-east1.ironwifi.com/api/users";

// 封装为async函数保证可以用await按顺序执行请求
const runRequests = async () => {
  // 1. 第一个请求：创建用户
  const createUserRes = await fetch(baseUrl, {
    method: "POST",
    headers: headers,
    body: JSON.stringify({"username": inputData.name})
  });
  const createUserData = await createUserRes.json();
  const userId = createUserData.id;

  // 2. 第二个请求：更新用户名字
  const updateFirstNameRes = await fetch(`${baseUrl}/${userId}`, {
    method: "PATCH",
    headers: headers,
    body: JSON.stringify({"firstname": inputData.first})
  });
  const updateFirstNameData = await updateFirstNameRes.json();

  // 此处可继续按顺序添加第三个、第四个请求，结构同上
  // 3. 第三个请求：xxx
  // 4. 第四个请求：xxx

  // 所有请求完成后统一返回结果
  return {
    userId: userId,
    firstNameUpdated: updateFirstNameData
    // 可按需添加其他请求的返回结果字段
  }
};

// 执行逻辑，统一处理成功和报错
runRequests()
  .then(result => callback(null, result))
  .catch(err => callback(err));

关键说明 #

• 全程仅需要调用一次callback，放在所有请求执行完毕的最终位置即可，提前调用会直接中断动作
• await会强制等待当前异步请求返回结果后，再执行后续代码，天然保证请求的执行顺序
• 后续要添加剩下的2个请求，只要按相同结构接着写在第二个请求后面即可，扩展非常方便

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