Nuxt Js fetch hook 被阻止并行运行答案

【问题标题】：NuxtJS's fetch hook is blocked from running in parallelNuxt Js fetch hook 被阻止并行运行
【发布时间】：2020-12-09 10:48:34
【问题描述】：

我有一个关于 nuxt 的 fetch hook 的问题。

复制链接 https://codesandbox.io/s/strange-lederberg-teq9z?file=/pages/index.vue

首先，"$route."query": "$fetch" in "watch" hook 用于在 url 更改时使 fetch 工作。

每次 url 更改时，fetch 挂钩都会立即运行。但是，如果我将 fetch 钩子设计为返回异步函数或 Promise，它会忽略 fetch，直到前一个 fetch 钩子完成。

例如，如果我快速将 URL 从默认状态更改为顺序 1->2->3，则只有在 1 中触发的 fetch 有效，而在 2 和 3 中触发的 fetch 将被忽略。似乎 2, 3 被忽略了，因为第一次提取还没有结束。

为什么会这样？

【问题讨论】：

标签： fetch hook nuxt.js

【解决方案1】：

在 nuxtjs 代码 link 中找到答案

$fetch 函数在函数内创建一个临界区，阻止 $fetch 函数并行运行

function $fetch() {
  // critical section starts
  if (!this._fetchPromise) {
    this._fetchPromise = $_fetch.call(this)
      .then(() => { delete this._fetchPromise })
      // critical section ends
  }
  return this._fetchPromise
}

【讨论】：