Vue.js中Axios返回数据与浏览器Network面板接口响应不匹配问题求助

我是Vue.js新手，当前遇到Axios请求结果与接口实际返回数据不匹配的问题。

相关代码 #

触发查看任务详情的按钮代码 #

<button class="btn btn-sm btn-primary" title="Detail" @click="showDetail(task.id)"><span class="fa fa-eye"></span></button>

组件script逻辑代码 #

export default {
  data(){
    return {
      tasks: [],
      taskDetail: [],
      categoryName: "",
      typeName: "",
      detailExist: false
    }
  },
  created(){
    this.getTasks()
  },
  methods: {
    getTasks(){
      axios.get("/task-lists/")
        .then(res => {
          this.tasks = res.data.data
        })
    },
    showDetail(id){
      this.detailExist = false
      axios.get("/task-detail/"+id)
        .then(res => {
          console.log(res)
          this.taskDetail = res.data.data
          this.detailExist = true
          this.collectCategory(this.taskDetail.category)
          this.collectType(this.taskDetail.type)
        }).catch(error => {
          console.log(error)
        })
    },
    startTask(id){
      axios.post('/start-task', {id: id, status: 1})
        .then(res => {
          this.getTasks()
          console.log(res.data)
        })
    },
    finishDev(id){
      axios.post('/finish-dev', {id: id, status: 2})
        .then(res => {
          this.getTasks()
        })
    },
    collectCategory(val){
      switch (val) {
        case 2:
          this.categoryName = 'Normal';
          break;
        case 3:
          this.categoryName = 'Emergency';
          break;
        default:
          this.categoryName = 'Standard';
          break;
      }
    },
    collectType(val){
      switch (val) {
        case 2:
          this.typeName = 'New Feature';
          break;
        case 3:
          this.typeName = 'Bug Fixing';
          break;
        default:
          this.typeName = 'Revamp';
          break;
      }
    }
  }
}

问题表现 #

调用/task-detail接口查询任务详情时，浏览器开发者工具Network面板中查看接口返回的data下status字段值为2，返回结构如下：

{
  "data": {
    "id": 1,
    "task_no": "RFC123XYZ",
    "task_name": "Task View",
    "mandays": 2,
    "start_date": "2021-10-12",
    "status": 2,
    "category": 2,
    "type": 2,
    "description": null,
    "cycle": []
  }
}

但是在Axios的then回调中打印res，得到的status字段值始终为1，二者数据不一致。

• 检查Axios全局响应拦截器：查看项目中是否配置了Axios的全局响应拦截器，有没有逻辑误修改了响应体里的data.data.status字段值，这是该问题最高频的诱因。
• 规避控制台引用类型打印的快照问题：浏览器控制台打印对象时，展开显示的是对象当前的最新值而非打印时的快照，可以在回调里直接打印console.log('status值为：', res.data.data.status)，或者通过console.log(JSON.parse(JSON.stringify(res)))打印序列化后的快照值，确认打印时的真实status值。
• 核对请求参数正确性：确认showDetail方法收到的id参数，和Network面板中该请求路径携带的id完全一致，避免误请求其他任务的详情数据。
• 修正taskDetail初始类型：你当前data中定义的taskDetail初始值为数组，但接口返回的是对象，将初始值改为taskDetail: {}，避免类型不匹配导致的异常赋值问题。
• 排查缓存问题：测试时给请求加随机时间戳后缀避免缓存干扰：axios.get("/task-detail/"+id + "?t=" + Date.now())，如果加上后数值一致，说明是旧的接口缓存被Axios读取了。
• 排查其他逻辑覆盖问题：检查组件内是否有watch、计算属性或者其他异步方法（比如getTasks方法）在接口返回后意外修改了taskDetail.status的值。

内容的提问来源于stack exchange，提问作者Ivan Tri Septian