在一个单一的路由/页面多次调用服务器的Nuxt / Vue错误?
为什么Nuxt在单个路由/页面上多次调用服务器?
以下是我通过express-templatetesting的示例:
import express from 'express' import { Nuxt, Builder } from 'nuxt' import api from './api' const app = express() const host = process.env.HOST || '127.0.0.1' const port = process.env.PORT || 3000 app.set('port', port) app.use(function(req, res, next) { console.log(res.headersSent) // <-- pay attention here next() }) // Import API Routes app.use('/api', api) // Import and Set Nuxt.js options let config = require('../nuxt.config.js') config.dev = !(process.env.NODE_ENV === 'production') // Init Nuxt.js const nuxt = new Nuxt(config) // Build only in dev mode if (config.dev) { const builder = new Builder(nuxt) builder.build() } // Give nuxt middleware to express app.use(nuxt.render) // Listen the server app.listen(port, host) console.log('Server listening on ' + host + ':' + port) // eslint-disable-line no-console
这个route / page / index.vue将会调用api/users
:
import axios from '~/plugins/axios' export default { async asyncData () { let { data } = await axios.get('/api/users') return { users: data } }, head () { return { title: 'Users' } } }
我在plugins / axios.js中添加了一个console.log
:
import * as axios from 'axios' let options = {} // The server-side needs a full url to works if (process.server) { options.baseURL = `http://${process.env.HOST || 'localhost'}:${process.env.PORT || 3000}` console.log('express:' + options.baseURL) } export default axios.create(options)
当我运行该应用程序并在我的浏览器上访问它时,请访问http://127.0.0.1:3000/ :
在我的terminal,我得到:
false express:http://localhost:3000 false false false false false false false false
正如你所看到的, 在第一次调用之后 ,它已经调用了8次以上的api/users
。
这是Nuxt中的错误吗?
如果我从server / index.js中删除了app.use(nuxt.render)
:
// Give nuxt middleware to express // app.use(nuxt.render)
我访问它在http://127.0.0.1:3000/或http://127.0.0.1:3000/api/users ,我得到:
false
只有一个电话是正确的。
那么,Nuxt发生了什么?
这不是一个错误。 Express正在执行你的中间件。 在这种情况下,它们是对app.js
, logo.png
等客户资产的http请求。像下面那样更改您的中间件代码并检查控制台。
app.use(function(req, res, next) { console.log(req.url) // Change this line next() })
- 错误:无法在视图目录中使用句柄查找视图“错误”
- 如何在EJS中dynamic添加选项标签?
- 在express.js上过滤
- Express JS – 使用路由和中间件的匿名函数
- 无法在nodeJS中validation用户:TypeError:无法使用“in”运算符在fs中search“用户名”
- RxJs – 当有可变数量的请求时,如何实现并行HTTP请求
- NodeJS MySQL如何获得查询function以外的结果
- 如何完全删除一个nodejs模块的所有function,甚至包括setInterval?
- 在mongodb中使用现有的字段作为objectId来创build带有节点的REST API并expression?