如何在Vue.js的方法中链式调用多个fetch请求并按顺序执行

问题解答 #

1. 是否需要添加延迟避免冲突？ #

完全不需要添加延迟。延迟不仅无法100%保证请求执行顺序，还会徒增不必要的等待时间，你可以通过async/await语法（JS中处理异步顺序执行的标准方案，和你之前用协程实现顺序执行的逻辑思路一致）严格保证请求按你指定的顺序依次执行。

2. 具体实现代码修改 #

你只需要把submit方法标记为异步方法，每个fetch前加await关键字即可，调整后的代码如下：

Vue JS代码（方法部分）

// 给submit方法添加async关键字标记为异步方法
submit: async function() {
  let myTitle = "myTitle"
  let myKolReferrer = "foo"
  let myChefs="chef jacob"
  let myDog="doggy"
  
  // 每个fetch前加await，会等前一个请求执行完成再执行下一个
  await 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"
  });
  await 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",
    // 原代码此处变量名错误，已修正为定义好的myDog变量
    "body": `title=${myDog}&kol_referrer=${myKolReferrer}`,
    "method": "POST",
    "mode": "cors",
    "credentials": "include"
  });
  await 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"
  });
}

HTML部分无需修改，保持原样即可：

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

补充说明 #

• 如果你需要获取前一个请求的返回结果作为下一个请求的参数，可以直接用变量接收await fetch(...)的返回值，再处理成json或者文本格式使用即可
• 如果需要处理请求异常，可以给每个await的fetch加try/catch包裹，也可以统一在外层加try/catch处理所有请求的异常情况

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