在工作线程准备就绪后装入vue

relj7zay  于 2023-01-21  发布在  Vue.js
关注(0)|答案(1)|浏览(139)

我使用msw.js作为请求模拟库。
然而,在msw web worker准备好之前,一些请求在开发时被触发。我可以确定,因为第一个请求失败了。我用DevTools在UI中重试它们,它按预期工作。
这里是我的main.ts

import { createApp } from 'vue'
import { router } from './routes'
import { pinia } from './pinia.setup'

import App from './App.vue'

import { onUnhandledRequest } from './mocks/browser'

const prepareWorkers = async () => {
  if (process.env.NODE_ENV === 'development') {
    const { worker } = await import('./mocks/browser')
    await worker.start({
      onUnhandledRequest
    })
  }
  return Promise.resolve()
}

prepareWorkers().then(() => {
  const app = createApp(App)

  app.use(pinia)
  app.use(router)
  app.mount('#app')
})

正如您所看到的,我已经在跟踪deffered mounting recommandations,但没有成功,我已经没有主意了。
我正在使用vite,它也可能是与它相关的东西,因为所有的文件都是从vite dev服务器下载的。此外,请求是在一个可组合的函数之外触发的。例如:

// useMyStatefulComposable.ts

// instantiate it once for multiple composable instances
const allResquests = Promise.allSettled(urls.map(url => fetch(u)))

export const useMyStatefulComposable = () => {
  // using the allRequests result inside the composable

  return { myReactiveData }
}
l0oc07j2

l0oc07j21#

在useMyStatefulComposable.ts中,请求可以立即完成,而无需等待应用程序初始化,这是一个需要修复的错误。如果请求应该完成一次,则需要延迟完成:

let allRequests;

export const useMyStatefulComposable = () => {
  if (!allRequests) {
    allRequests = Promise.allSettled(urls.map(url => fetch(u)))
  }
  ...

  return { myReactiveData }
}

考虑到这些是需要在useMyStatefulComposable中处理的allRequests的结果,承诺可能也需要在if (!allRequests)内链接。

相关问题