目录

一、问题描述

二、解决思路

三、分析各种情况下的报错

---

一、问题描述

        登录界面点击【退出】按钮，控制台提示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。退出功能正常进行

        路径正确的时候，未接收实参，同时请求未携带参数，也是能正常退出的