在使用vuejs的方法中添加多个获取请求

Question

不知道如何在方法中链接多个获取请求。我想让这些人一起跑。他们都会去不同的路线，但我想他们需要延迟一点，这样就不会有冲突了？不熟悉如何使用vuejs和fetch来完成此操作，但使用coroutines进行了类似的操作。

​

submit: function() {
  let myTitle = "myTitle"
  let myKolReferrer = "foo"
  let myChefs="chef jacob"
  let myDog="doggy"
  
  fetch("", {
    "headers": {
      "accept": "*/*",
      "accept-language": "en-US,en;q=0.9",
      "content-type": "application/x-www-form-urlencoded",
      "sec-ch-ua": "\" Not A;Brand\";v=\"99\", \"Chromium\";v=\"96\", \"Google Chrome\";v=\"96\"",
      "sec-ch-ua-mobile": "?0",
      "sec-ch-ua-platform": "\"macOS\"",
      "sec-fetch-dest": "empty",
      "sec-fetch-mode": "cors",
      "sec-fetch-site": "same-origin"
    },
    "referrer": "",
    "referrerPolicy": "strict-origin-when-cross-origin",
    "body": `title=${myTitle}&kol_referrer=${myKolReferrer}`,
    "method": "POST",
    "mode": "cors",
    "credentials": "include"
  });
  fetch("", {
    "headers": {
      "accept": "*/*",
      "accept-language": "en-US,en;q=0.9",
      "content-type": "application/x-www-form-urlencoded",
      "sec-ch-ua": "\" Not A;Brand\";v=\"99\", \"Chromium\";v=\"96\", \"Google Chrome\";v=\"96\"",
      "sec-ch-ua-mobile": "?0",
      "sec-ch-ua-platform": "\"macOS\"",
      "sec-fetch-dest": "empty",
      "sec-fetch-mode": "cors",
      "sec-fetch-site": "same-origin"
    },
    "referrer": "",
    "referrerPolicy": "strict-origin-when-cross-origin",
    "body": `title=${doggy}&kol_referrer=${myKolReferrer}`,
    "method": "POST",
    "mode": "cors",
    "credentials": "include"
  });
  fetch("", {
    "headers": {
      "accept": "*/*",
      "accept-language": "en-US,en;q=0.9",
      "content-type": "application/x-www-form-urlencoded",
      "sec-ch-ua": "\" Not A;Brand\";v=\"99\", \"Chromium\";v=\"96\", \"Google Chrome\";v=\"96\"",
      "sec-ch-ua-mobile": "?0",
      "sec-ch-ua-platform": "\"macOS\"",
      "sec-fetch-dest": "empty",
      "sec-fetch-mode": "cors",
      "sec-fetch-site": "same-origin"
    },
    "referrer": "",
    "referrerPolicy": "strict-origin-when-cross-origin",
    "body": `title=${myChefs}&kol_referrer=${myKolReferrer}`,
    "method": "POST",
    "mode": "cors",
    "credentials": "include"
  });
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<button v-on:click="submit()">Submit
</button>

​

Answer 1

异步&等待威尔成功了

async submit() {
   const request1 = '...';
   const request2 = '...';
   const response1 = await fetch(request1).then(response => response.data)
   const response2 = await fetch(request2).then(response => response.data)
}

但是，强烈建议将所有请求放在一起进行优化，使用

Promise.all([...])

记住，在每次获取时也要设置catch，以便管理可能的端点错误。