admin 管理员组文章数量: 1184232
目录
一、问题描述
登录界面点击【退出】按钮，控制台提示json解析异常
二、解决思路：
1、找到对应的组件和事件回调
<el-dropdown-item divided @click.native="logout">
<span style="display:block;">退出</span>
</el-dropdown-item>2、该事件回调内，向仓库派发了一个action。接着找到store目录下存放user相关的js文件和该异步操作。
methods: {
async logout() {
await this.$store.dispatch('user/logout')
this.$router.push(`/login?redirect=${this.$route.fullPath}`)
}
}3、函数内返回一个Promise结果，并对resolve和reject结果给出相应的操作；并通过引入的口logout方法发送请求
const actions = {
// 退出登录
logout({ commit, state }) {
return new Promise((resolve, reject) => {
//成功回调
logout({ token: state.token }).then(() => {
removeToken()
resetRouter()
commit('RESET_STATE')
resolve()
}).catch(error => {
// 失败回调
reject(error)
})
})
},
}4、找到相关的api文件， 发现三处错误，导致json解析异常
路径写错； 未接收实参； 发送post请求时，未携带参数
// 对外暴露退出登录的接口（函数）
export function logout() {
return request({
url: '/admin/acl/index/login',
method: 'post',
})
}
最主要的问题是在于，发送请求的时候，路径错误和没有携带有效的数据。
这里将路径更正，补全参数，运行即正常。
三、分析各种情况下的报错：
情况1：
路径错误 ，只接收了形参，请求未携带参数时 —— 会提示解析异常，也就是最根本的问题。
情况2：
定义了形参， 请求路径错误 ，并携带了（错误的）参数—— 则会抛出Error，提示以下信息：
查看第二行报错提示，查看服务器响应失败的相关操作：在这里将错误信息返回
这里错误被logout函数的catch捕获到，（跳过then）执行了reject操作
情况3：
未接收实参的情况下* *， 发送请求时携带的是空数据data ，但路径不管是错误或者正确的时候，都会先提示引用错误，在该作用域下找不到变量data。
情况4：
路径正确时，接收了实参， 发送请求时未携带data 。退出功能正常进行
路径正确的时候，未接收实参，同时请求未携带参数，也是能正常退出的
版权声明：本文标题：JSON解析中遇到bug？这份指南帮你快速解决 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.roclinux.cn/p/1773531173a3563001.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论