在Vue组件中使用Axios…出现错误后承诺

我正在vue组件中使用axios查询elasticsearch数据库。当axios运行get请求时,它会立即返回 Error: Request failed with status code 400 .但在检查控制台后,我发现 get 请求成功,承诺中的函数运行(尽管是在返回错误后)。

我使用的是从 收到 请求填写组件的模板,但我收到一个错误 TypeError: Cannot read property 'data' of undefined .据我所知,数据最终会显示出来(至少在控制台中),但现在要呈现在屏幕上已经太晚了。

我有什么明显的遗漏吗?

<template>
  <div style="position: fixed; background-color: rgba(255, 255, 255, .9); top: 2.5%; left: 2.5%; width: 95%; height: 95%; z-index: 100">
    <div style="position:absolute; background-color: #9BBB58; width: 100%; height:3%">
      <button style='float:right;' @click="$emit('close-viz')">x</button>
    </div>
    <div v-bind:style="{position: 'absolute',  height: "100%", width: "100%", 'overflow-y': 'scroll'}" >
      <table>
        <tr>
          <th>Publications</th>
        </tr>
        <tr v-for='paper in pubdata.data.hits.hits'>
          {{console.log(paper)}}
          <a v-bind:href="paper._source.link">
            <h3 v-if="paper._souce.title">{{paper._source.title}}</h3>
          </a>
          <p v-if="paper._source.abstract">
            {{paper._source.abstract}}
          </p>
          <p>
            <button @click="queryItem('firm', paper._source.firm)">{{paper._source.firm}}</button> was awarded ${{paper._source.amount}} in {{paper._source.year}}
          </p>
          <p>
            The PI is <button @click="queryItem('PIName', paper._source.PIName)">{{paper._source.PIName}}</button> and the the business contact is <button @click="queryItem('BusName', paper._source.BusName)">{{paper._source.BusName}}</button>
          </p>
        </tr>
      </table>
    </div>
  </div>
</template>

import axios from 'axios'
export default {
  props: ["field", "query"],
  data() {
    return {
      pubData: null
    }
  },
  created() {
    const fullQuery = this.queryItem(this.field, this.query)
    this.runQuery(fullQuery)
  },
  methods: {
    queryItem: function(field, query) {
      const fullQuery = JSON.parse(`{
            "size": 100,
            "query": {
              "term": {
                "${field}": "${query}"
              }
            }
          }`)

      this.runQuery(fullQuery)
    },
    runQuery: function(query) {
      axios.get("http://localhost:9200/sbir/_search", {
        params: {
          source: query,
          source_content_type: 'application/json'
        }
      }).
      then(res => {
        console.log('inside pubinfo')
        this.pubData = res;
        console.log(this.pubData)
      }).
      catch(function(error) {
        console.log('BELOW IS AN ERROR')
        console.log(error)
      })
    }
  }
}