js同步异步导致的问题 about vite-plugin-mock-dev-server HOT 4 CLOSED

原因出在了 while (Date.now() < expire); 这行代码，这行代码会导致 服务器进程被阻塞。

while (Date.now() < expire); 会在 expire 之前，一直循环执行，同步阻塞 整个服务器的进程执行，在阻塞期间，服务器无法执行其他的代码，所以也就无法响应其他的请求。 async/await 你可以理解为是 Promise 的语法糖，实际上他是异步的。

await new Promise((resolve) => {
  setTimeout(resolve, 2000)
})
return {
  message: '成功',
  code: '200',
}

类似于：

return new Promise((resolve) => setTimeout(resolve, 2000))
	.then(() => ({
        message: '成功',
         code: '200',
	}))

如果需要接口延迟返回，插件在 mock 配置中有一个 delay 的配置项，可以直接指定接口延迟多少毫秒响应，有延迟响应的需求，直接使用这个配置项即可：

export default defineMock({
   url: '/mock/save1',
   delay: 2000,
   body: (res) => {
      const { query, params, body } = res
      return {
        message: '成功',
        code: '200',
      }
    },
  })

from vite-plugin-mock-dev-server.

我不大理解你描述的这种场景，可否给出一些示例代码。

在插件内部，是通过中间件实现的接口拦截，模拟响应结果，对于每个请求，都是独立的，即客户端同时发起请求，对于mock server来说，都是独立处理，并不会阻塞其他请求。

但如果在客户端的代码中，代码如：

await fetch('/api/1')
await sleep(10000)
await fetch('/api/2')

这种情况是由于客户端代码编写的代码本身已经阻塞了其他请求。

如果 按钮 B 和 按钮 A 之间不存在逻辑关联，且按钮B只关联响应B，按钮A只关联响应A，那么不会存在点击B再点击A需要响应A等待响应B的情况的。

from vite-plugin-mock-dev-server.

比如，以下情况
mock：

export default defineMock([
  {
    url: '/mock/list',
    body: () => {
      return {
        data: ['hello', 'world'],
        message: '成功',
        code: '200',
      }
    },
  },
  {
    url: '/mock/save1',
    body: (res) => {
      const { query, params, body } = res
      const start = Date.now()
      const expire = start + 2 * 1000

      while (Date.now() < expire);
      return {
        message: '成功',
        code: '200',
      }
    },
  },
  {
    url: '/mock/save2',
    body: async (res) => {
      const { query, params, body } = res
      await new Promise((resolve) => {
        setTimeout(resolve, 2000)
      })
      return {
        message: '成功',
        code: '200',
      }
    },
  },
])

操作

async function btnA(){
  const result = await fetch('/mock/list');
  console.log(result)
}

async function btnB(){
  const result = await fetch('/mock/save1');
  console.log(result)
}

async function btnC(){
  const result = await fetch('/mock/save2');
  console.log(result)
}

先点B，再点A，A需要同步等待B完成，才会返回，应该就是你说的await导致~~但是先点C，再点A，A立即返回，然后C等待后返回~结果是正确的，但是对于save2.增加了async这个，这块有些似懂非懂，这应该已经跟插件无关了，属于js的同步、异步知识，我先说说我的理解，如果不对，希望指正。
1、fetch本身为异步请求，增加await后，相当于变成同步操作，加上save1和list的返回，方法也是同步，所以点击B,在点击A，整个执行都是相当于，按顺序执行同步执行
2、但是save2增加async后，虽然是按顺序执行，但是由于save2的返回方法变成了异步，其实还是C执行完，再执行A，只不过C对应的sace2处理逻辑变成了异步，所以不会影响到A

from vite-plugin-mock-dev-server.

感谢你的指导和详解，看来还是自己js基础知识掌握不够扎实

from vite-plugin-mock-dev-server.