哈喽，你们知道不，Vue这小玩意儿，做前端开发的时候，可是帮了咱们大忙！简单好用还挺多厉害功能，让咱们快速搞定一堆App。不过用着用着，有的朋友可能就遇到一个叫vue-resource的问题，结果弹出一堆英文错误码，真是头疼！那今天咱就聊聊，这到底怎么回事，有什么解决方法？
跨域请求问题
“网络出问题”就是Vue-resource跟服务器连接不上了，原因可能是跨域请求惹的祸。这是因为浏览器对咱们的安全保护，不给Vue-resource读取cookie的权限。所以，咱们需要搞定这个”代理”。说白了，代理就是个中间人，把所有请求都从服务器带回你自己的电脑，就能跳过浏览器的安全限制。
//Vue.config.js
module.exports = {
devServer: {
proxy: {
'/api/*': {
target: 'http://localhost:3000',
changeOrigin: true,
secure: false,
pathRewrite: {
'^/api': ''
},
cookieDomainRewrite: {
"*": ""
}
}
}
}
}
亲们要记住了！如果服务器不支持cookies的话，vue-resource跨域功能可能就玩不转。遇到了”Uncaught(inpromise)Error:NetworkError”这种情况，只需让服务器允许咱们带着cookies去跨域访问就能解决。
服务器错误
除了跨域的麻烦，后台出点儿错儿，Vue-resource也可能上不了网。这时候你得看看是服务器出毛病了，还是你哪儿整岔劈了。要搞定这事儿，回头仔细瞧瞧后台代码，确保服务器能顺顺当当地处理用户请求！
遇到”捉摸不定的（协议里的）错儿：都怪网有问题”咋整？别慌，瞅瞅浏览器上的相关API网址就行了！这么一看，咱们就能弄清楚是不是服务器那边闹情绪了。真要是的话，赶紧修复，这样前端出错的概率也能降下来不少
网络问题
说到那个“网络错误”，首先你得想下是不是网出毛病！可能是你家网速太慢，或者你的电脑找不到DNS地址，甚至是防火墙给堵上了。这些都能让网站和服务商联系不上。所以，咱们先检查下自家网络设置正不正确，网络是不是能用。记住，网不好时千万别忙大事儿~
解决方案
遇到”Uncaught(inpromise)Error:NetworkError”？别怕，这事儿好办！先查查Vue-resource的设置对不对，比如网址啦、请求方法什么的，搞错了肯定出问题。当然别忘了把Vue-resource的库给引进来否则也没法用。
//使用健康检查
setInterval(() => {
this.$http.get('/healthcheck')
.then(response => {
console.log(response)
})
.catch(error => {
console.error(error)
alert('服务器错误') // 通知用户服务器问题
})
}, 10000)
记得搞定这个项目之后，检查下后台运行的情况。有问题就赶紧找人解决，哪怕遇到”网络错误”这种小事儿，也别拖到最后才发现。
简单的说咱们得搞懂手机上这些缓存是怎么回事儿，别被陈旧的信息误导了。每次发请求前都记得清空一下缓存，只有这样才能够确保收到的信息最新鲜准确~
结论
唉这个”Uncaught(inpromise)Error:NetworkError”就像是玩手游时遇到的那点小麻烦，虽然不至于让游戏挂掉，但真的会让应用速度慢下来，所以大家要重视！为了避免这样的问题出现，解决办法可是有很多种的。
this.$http.get('/url', { headers: { 'Cache-Control': 'no-cache' } })
.then(response => {
console.log(response)
})
.catch(error => {
console.error(error)
})
搞定跨域请求调试、服务器排查和网络设置这几招儿，Vue应用就不容易出问题。再加上个强悍的健康检查系统，简直坚不可摧！这些实用小技巧能帮你应对那个恼人的”Uncaught(inpromise)Error:NetworkError”错误，赶快试试看！
评论0