vue.js - Axios 请求不是完全异步运行的。 TTFB 随着每个请求而增加？

Question

我在一个页面上有几个类似的 Vue.js 组件，每个组件都需要使用 axios 向我的服务器发送 API 请求。

请求看起来像这样:

this.axios.get(`/api/stock/${this.sku}`)
  .then(result => {
    this.stockLevel = result.data
  })
  .catch(err => {
    console.log(err)
  })

生成的请求在 Chrome 开发工具中看起来像这样:

如您所见，请求是同时开始的，但是 TTFB 随着每个请求的增加而增加。

似乎请求不是完全异步运行的。如果可能的话，我更希望请求不要像现在这样互相阻塞。

您知道这里发生了什么以及如何预防吗？

后端运行在一个使用 HTTP2 的简单 Nginx 服务器上，根据服务器日志，请求实际上是一个接一个地接收到的(而不是同时)。

非常感谢您的帮助。

谢谢!

Answer 1

我也注意到 vuejs 项目中 axios 的性能不佳。与其他浏览器请求 (Chrome) 并发时，TTFB 约为 450 毫秒。

我切换到 fetch 并且同一页面上的 TTFB 现在下降到大约 10 毫秒。

/!\fetch api还没有 supported通过 IE11(2017 年 9 月)/!\

您的代码将是:


var vm = 这个
获取(`/api/stock/${this.sku}`)
.then(结果 => {
结果.json().then(数据 => {vm.stockLevel = 数据})
})
.catch(错误 => {
控制台日志(错误)
})