nuxt的asyncData的坑(刷新页面报错)

asyncData
刚接触asyncData就踩了坑，和大家分享一下。

代码如下

template>
  <div>
    asyncdata页面
    {{ info }}
  </div>
</template>

<script>
import axios from 'axios'

export default {
  async asyncData () {
    const data = await axios.get('https://api-hmugo-web.itheima.net/api/public/v1/home/floordata')
    return { info: data }
  }
}
</script>

<style>

</style>

在实际运行时，在首页通过nuxt-link方式进入这个dataget页面可以正常获取数据

但是刷新页面就会报错， Maximum call stack size exceeded
找了好久才知道这是asyncData对于请求的处理造成的，通过nuxt-link请求数据和在客户端正常请求类似类似，所以能够正常返回数据，刷新页面之后，在后台请求数据，返回结果会判断里面的status的值。

• 若为200正常返回
• 不是200,报错
  而我这里使用的接口返回的状态码在meta属性中
  

所以要想正确得到数据，需要请求response拦截处理

import axios from 'axios'

export function request () {
  axios.interceptors.response.use(function (response) {
    if (response.data.meta.status === 200) {
      return response.data
    } else {
      return Promise.reject(response)
    }
  })
  return axios
};

通过导出的request进行数据请求，刷新页面正常获得数据