如何解决使用Vue和Webpack提取对相同URL的重复请求
我在Web控制台中显示了奇怪的结果: fetch()将重复的请求发送到同一URL。
我认为这可能与fetch()有关,但也注意到在重新加载应用程序(基于Webpack的类应用程序)时,对http:// localhost:8080 / sockjs-node / info的请求也在复制。
相比之下,我注意到jQuery处理的请求没有重复并且可以正常工作。
我不能说这是由于webpack配置,获取导致的错误还是我在Vue组件中使用它们的方式。
例如本文指出了可能的原因https://insights.daffodilsw.com/blog/how-to-avoid-duplicate-api-requests,但就我而言,这不是由于用户互动引起的:请求在重新启动应用程序(Webpack)时触发,尤其是堆栈跟踪显示请求在以下时间触发多次创建组件。
我如何使用fetch()
的示例:
// component -
methods : {
search(input) {
return new Promise(resolve => { // a new promise is request multiple times,in spite in created() it is called just once
var _base = 'myEndpoint/api'
const url = `${_base}fuzzyautocomplete?q=${encodeURI(input)}`
if (input.length < 3) {
return resolve([])
}
fetch(url) // so promises are actually different,and duplicated requests are fired by fetch
.then(response => response.json())
.then(data => {
console.log(data)
// resolve(data.query.search)
resolve(data)
})
})
},....
// and it should be called just once at time of creation
created() {
this.search('init first query !!');
}
你能建议吗?
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。