问答博客标签用户活动
logo极客观点logo项目管理logoHarmonyOS
javascript
php
java
vue.js
git
html5
python
node.js
android
mysql
react.js
linux
ios
css
golang
spring
docker
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

请问如何将`axios`写入`Promise.allSettled`中进行`await`请求？

头像
sws797
    1772622

    已有封装好的api.js，现在要根据一组参数来使用Promise.allSettled同时加载不同的接口，试了很多遍要不就是在调用Promise.allSettled就运行了，要不就是调用报错。

    // 旧代码，不方便改动
export function apiShow1(params) {
  return axios.get(`fake_api1?id=${params.id}`);
}

export function apiShow1(params) {
  return axios.get(`fake_api2?id=${params.id}`);
}

    我的尝试

    // vue methods
async validateSth() {
  const pages = [
    { type: "aa", params: { id: 1 } },
    { type: "bb", params: { id: 2 } },
  ];

  const apiPromises = [];
  let isVerified = true;

  for (let i = 1; i < pages.length; i += 1) {
    apiPromises.push(new Promise((resolve) => {
      const page = pages[i];
      switch (page.type) {
        case "aa": {
          return apiShow1(page.params)
            .then((res) => { /* doSth1 */ }
            .catch(() => (isVerified = false));
        }
        case "bb": {
          return apiShow1(page.params)
            .then((res) => { /* doSth2 */ }
            .catch(() => (isVerified = false));
        }
      }
    })
  }

  // 注释掉下面的代码依然会运行，我不知道应该怎么改
  // await Promise.allSettled(pagePromises);

  return isVerified;
}

async onsubmit() {
  this.loading = true;
  if (await this.validateSth()) {
    console.log("submit")
  }
  this.loading = false;
}
    javascriptaxiosasync-await
    阅读 801
    avatarAI BotBETA
    问题解决方案如下：

1. **修正重复的函数定义**：首先，你在 `api.js` 中定义了两个相同名称的函数 `apiShow1`，这是不正确的。应该将它们分别命名为 `apiShow1` 和 `apiShow2`。

2. **正确构建 Promise 数组**：在你的 `validateSth` 方法中，你试图手动创建一个新的 Promise，但你的实现中有一些错误，例如没有正确地返回 Promise，以及 `.then` 后缺少闭合括号。你应该直接使用 `apiShow1` 或 `apiShow2` 函数，并处理它们的返回值和错误。

3. **使用 `Promise.allSettled`**：确保你等待的是正确的 Promise 数组，并且正确地使用了 `await`。

以下是修改后的代码：

    // api.js
    export function apiShow1(params) {
    return axios.get(fake_api1?id=${params.id});
    }

    export function apiShow2(params) {
    return axios.get(fake_api2?id=${params.id});
    }

    // vue methods
    async validateSth() {
    const pages = [

    { type: "aa", params: { id: 1 } },
{ type: "bb", params: { id: 2 } },

    ];

    const apiPromises = pages.map(page => {

    switch (page.type) {
  case "aa":
    return apiShow1(page.params).then(res => {
      // doSth1 with res
    }).catch(() => {
      // handle error
    });
  case "bb":
    return apiShow2(page.params).then(res => {
      // doSth2 with res
    }).catch(() => {
      // handle error
    });
  default:
    return Promise.reject(new Error("Unknown type"));
}

    });

    await Promise.allSettled(apiPromises);

    // Assuming you want to return true if all requests were handled,
    // regardless of their success or failure. If you want to return
    // false on any failure, you need a different logic.
    return true; // or based on your condition check isVerified
    }

    async onsubmit() {
    this.loading = true;
    if (await this.validateSth()) {

    console.log("submit");

    }
    this.loading = false;
    }

    
**注意**：
- 我移除了 `isVerified` 变量，因为在你的代码中它没有被正确地用于控制返回结果。如果你需要根据请求的成功或失败来设置 `isVerified`，你需要在每个 `.then` 和 `.catch` 中适当地设置它，并在 `Promise.allSettled` 后检查所有请求的状态。
- `Promise.allSettled` 总是解析为成功，无论内部的 Promise 是成功还是失败。如果你需要基于请求的成功或失败来决定某些逻辑，你应该检查 `Promise.allSettled` 返回的每个 Promise 的状态。
    1 个回答
    得票最新
    头像
    寸寸青丝愁华年
      700114
         async function validateSth() {
      const pages = [
        { type: "aa", params: { id: 1 } },
        { type: "bb", params: { id: 2 } },
      ];
      return Promise.allSettled(
        pages.reduce((pre, curr, i) => {
          pre.push(new Promise((resolve) => {
            const page = pages[i];
            switch (page.type) {
              case "aa": {
                resolve(apiShow1(page.params))
              }
              case "bb": {
                resolve(apiShow2(page.params))
              }
            }
          }))
          return pre;
        }, [])
      ).then((res) => res.every((item) => item.status === 'fulfilled'));
    }

    validateSth().then((res) => {
      console.log('isVerified-----', res);
    })
      撰写回答
      你尚未登录，登录后可以
      • 和开发者交流问题的细节
      • 关注并接收问题和回答的更新提醒
      • 参与内容的编辑和改进，让解决方法与时俱进
      推荐问题
      宣传栏