鍍金池/ 問答/Linux  HTML/ nuxt 刷新出錯問題

nuxt 刷新出錯問題

用的是官方的express模板,即安裝時,使用的 vue init nuxt-community/express

就增加了一個叫content的頁面.然后模擬一下怎么寫.
content.vue template部分代碼

    <div style="padding: 15px;">
        我是文章頁
        <!-- <Table :data="testData" border :columns="[{title: '名字', key: 'name'}, {title: '號碼', key: 'phone'}]"></Table> -->
        <ul>
            <li v-for="(item,index) in testData" :key="index">
                <div>名字:{{item.name}}</div>
                <div>號碼:{{item.phone}}</div>
            </li>
        </ul>
        <Button @click="back" type="primary" style="margin-top:20px">返回</Button>
    </div>

script 部分代碼

import axios from 'axios'
export default {
    async asyncData () {
    return axios.get('/api/test/get').then(res => {
        return { testData: res.data }
    })
  },
  data() {
      return {
        testData: []
      }
  },
  methods: {
      back() {
          this.$router.push('/')
      }
  },

因?yàn)槭褂玫氖乔短茁酚?所以路徑上api可以省略,數(shù)據(jù)是確確實(shí)實(shí)能拿到的,不刷新前都正常,一刷新就......
express 部分代碼

const testData = [
  { name: '名字1', phone: '98381734318'},
  { name: '名字2', phone: '12345667789'}
]
router.get('/test/get', function (req, res, next) {
  res.json(testData)
})

刷新前
圖片描述

刷新后圖片描述

報錯信息

圖片描述

求解.這報錯信息太少了.....有點(diǎn)不知道怎么解決

回答
編輯回答
柚稚

自己解決了. 錯誤應(yīng)該是指出我沒有進(jìn)行錯誤處理.即返回的Promise沒有reject的處理函數(shù).另外,因?yàn)榱?xí)慣于直接引入axios.沒有注意到官方處理過的axios的函數(shù),已經(jīng)在"~/plugins"文件夾當(dāng)中,內(nèi)置了相應(yīng)的baseURL.正確的寫法是這樣的.


import axios from 'axios'
export default {
    async asyncData () {
    return axios.get('http://localhost:3000/api/myMsg').then(res => {
        return { testData: res.data }
    }).catch(err => {
        
    })
  }

另外,參照官方模板寫下的代碼應(yīng)該是這樣的.

import axios from '~/plugins/axios'
export default {
    async asyncData () {
    return axios.get('/api/myMsg').then(res => {
        return { testData: res.data }
    })
  }

區(qū)別就在于,你是直接引入axios.還是引入官方模板中,對于axios處理過的函數(shù)而已.總之還是樓主自己太粗心了.

2017年1月27日 12:02