Vue中如何在单个方法内发送多个axios PUT请求？可否用Promise.all实现

完全可以在单个方法中使用Promise.all发送多个PUT请求。Promise.all的入参只要求是Promise实例，和实例对应的HTTP请求方法无关，你之前查到的示例多为GET场景只是因为GET请求写法更简单，不存在仅支持GET的限制。

实现时只需要为每个PUT请求单独配置对应的URL、匹配的请求体，再将所有axios返回的Promise实例传入Promise.all即可，公共的请求头等配置可以抽离复用，不需要重复编写。

参考实现代码 #

updateProduct() {
  // 抽离公共请求配置复用
  const commonConfig = {
    headers: {
      Authorization: `Bearer ${localStorage.getItem("token")}`
    },
  };

  // 请求1：原有产品名称更新接口
  const req1 = axios.put(
    "myapihere.com" + this.$route.params.id,
    { name: this.name }, // 该接口对应的独立请求体
    commonConfig
  );

  // 请求2：新增的第二个PUT接口，替换为你实际的接口地址
  const req2 = axios.put(
    "your-second-api-url",
    { /* 填入第二个接口匹配的请求参数即可 */ },
    commonConfig
  );

  // 请求3：新增的第三个PUT接口，替换为你实际的接口地址
  const req3 = axios.put(
    "your-third-api-url",
    { /* 填入第三个接口匹配的请求参数即可 */ },
    commonConfig
  );

  Promise.all([req1, req2, req3])
    .then(([res1, res2, res3]) => {
      // 所有请求全部成功后进入该回调，返回结果顺序和传入请求的顺序一一对应
      console.log("接口1返回：", res1);
      console.log("接口2返回：", res2);
      console.log("接口3返回：", res3);
      // 此处编写更新成功后的业务逻辑即可
    })
    .catch((err) => {
      // 任意一个请求失败都会进入该回调
      console.log("请求出错：", err);
    });
},

补充说明 #

• 每个PUT请求的URL、请求体完全独立配置，不会互相干扰，按照对应接口的要求传参即可
• 如果业务场景允许部分接口失败、需要拿到所有请求的执行结果（无论成功失败），可以将Promise.all替换为Promise.allSettled
• Promise.all的返回结果顺序和你传入的请求数组顺序严格一致，不需要担心接口响应快慢导致结果错位

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