Question

我有这个功能，当网页打开时填充选择组件：

async mounted() {
  const [darwinProjectResponse, thirdPartyResponse] = await Promise.all([
    axios.get("http://127.0.0.1:5000/api/projects?placeholder=darwin"),
    axios.get("http://127.0.0.1:5000/api/thirdparty")
  ]);
  this.projects = [{
    "projectType": "Github Projects",
    "grpValues": darwinProjectResponse.data.projects,
  },{
    "projectType": "Thirdparty Projects",
    "grpValues": thirdPartyResponse.data,
  }];
}

现在我已经在我想要点击的模板中创建了一个超链接，并强制重新选择组件。

 <div class="round-button">
        <div class="round-button-circle">
            <a @click="reloadSelect" href="#">
                <img src="images/leftarrow.png"  alt="Reload" title="Sync with Github" />
            </a>
        </div>
</div>

所以我在脚本标签reloadSelect

中定义了一个函数

function reloadSelect(force="false") {
       const [darwinProjectResponse, thirdPartyResponse] = Promise.all([
        axios.get("http://127.0.0.1:5000/api/projects?placeholder=darwin&rc=" + force),
        axios.get("http://127.0.0.1:5000/api/thirdparty")
      ]);

    console.log("Data fetched again");

      this.projects = [{
        "projectType": "Github Projects",
        "grpValues": darwinProjectResponse.data.projects,
      },{
        "projectType": "Thirdparty Projects",
        "grpValues": thirdPartyResponse.data,
      }];
}

注意：我已删除await，因为我没有async reloadSelect以避免语法错误。

并修改了异步挂载以调用此函数reloadSelect，以便Select也会在页面加载时继续填充，但它会给出TypeError：无效尝试去构造不可迭代的实例。

所以我发现console.log("Data fetched again");从未运行过。我认为我试图再拉一次是错误的。

Answer 1

Promise.all会返回一个单数的承诺，而不是数组，因此您无法对其进行解构。解析一旦解决了每个承诺。

为什么不让Promise.all异步？

reloadSelect

或者，如果您因任何原因无法使其异步，那么使用async function reloadSelect(force="false") { const [darwinProjectResponse, thirdPartyResponse] = await Promise.all([，then只是承诺的语法糖和await：

then

在再次acalling axios.get时无效尝试去构造非可迭代实例

1 个答案: