Vue.js新手使用Axios从URL获取JSON列表时遇两类问题求助

嘿，刚看了你的问题，这两个小问题其实很常见，我帮你一步步搞定：

问题1：Axios在组件中的正确调用方式 #

你在main.js里的配置其实是没问题的，Vue.use(VueAxios, axios)已经把Axios挂载到Vue实例体系中了，但组件里不该用Vue.axios，而是要用this.axios——因为VueAxios会把axios注入到每个组件的实例中，用this才能访问到当前组件关联的axios实例，这样也能保证后续如果有拦截器、请求配置的全局修改能生效。

问题2：console.log输出为空的原因 #

你把console.log(response)写在了then方法外面，而Axios的请求是异步的！当代码执行到console.log的时候，请求还在后台跑，根本没拿到响应结果，自然输出空。必须把log放到then回调里面，或者用async/await的写法才能拿到正确的响应数据。

修改后的组件代码 #

<template>
  <div id="app">{{ info }}</div>
</template>
<script>
export default {
  name: "app",
  data() {
    return { info: null };
  },
  mounted() {
    // 改用this.axios调用接口
    this.axios
      .get("https://dog.ceo/api/breeds/list/all")
      .then(response => {
        this.info = response.data; // 建议取response.data，接口实际返回的数据都在这里面
        console.log(response); // 把log放到then回调里，才能拿到完整响应
      })
      .catch(error => {
        // 加上错误捕获，方便排查请求失败的情况
        console.error("请求出错啦：", error);
      });
  }
};
</script>

额外小提示 #

• 接口返回的有效数据一般都嵌套在response.data里，直接赋值response的话，页面会显示整个响应对象（包含状态码、头信息等），通常不是你想要的列表数据，所以建议改成this.info = response.data。
• 加上catch方法可以捕获网络错误、接口返回错误码等异常情况，方便你快速定位问题。

内容的提问来源于stack exchange，提问作者Storm