如何在Vue.js中使用Axios调用API及解决赋值失效问题

嘿，我来帮你搞定这两个问题！

其实很简单，分几步就能搞定：

• 第一步：引入Axios：你可以通过CDN快速引入，或者用npm/yarn安装（适合Vue CLI项目）。如果是用CDN，只需要在Vue的脚本标签之后加一行Axios的脚本就行：

  <script src="https://unpkg.com/vue"></script>
  <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
  

• 第二步：在Vue组件中调用API：通常我们会在mounted钩子（组件挂载后）发起请求，或者把请求封装到methods里方便复用。比如发起GET请求的基础写法：

  new Vue({
    el: '#app',
    data() {
      return {
        apiData: null
      }
    },
    mounted() {
      axios.get('你的API地址')
        .then(response => {
          // 把返回的数据赋值给data里的变量
          this.apiData = response.data
        })
        .catch(error => {
          // 处理请求失败的情况
          console.log('请求出错了:', error)
        })
    }
  })
  

• 除了get，Axios还支持post、put、delete等常用请求方法，用法类似，只需要把get换成对应的方法，并且传递参数即可。

看了你的代码，我发现两个关键问题，修正后就能正常工作了：

问题1：没有引入Axios库 #

你的HTML代码里只引入了Vue，但没加Axios的脚本标签！浏览器会找不到axios这个对象，请求根本没法发起（你说请求成功，可能是实际代码里加了但示例漏写了，一定要补上）。

问题2：错误地赋值了整个response对象 #

Axios的响应对象包含很多额外信息（比如状态码、响应头），而API返回的实际数据是存在response.data里的。你直接把整个response赋值给info，模板里显示的是整个响应对象，看起来像是“数据没更新”。

修正后的完整代码 #

Vue代码：

new Vue({
  el: '#app',
  data() {
    return {
      info: null
    }
  },
  mounted() {
    axios
      .get('https://api.coindesk.com/v1/bpi/currentprice.json')
      .then(response => {
        // 这里要取response.data，才是API返回的实际数据
        this.info = response.data
      })
      .catch(error => {
        // 加上错误处理，方便调试
        console.error('请求出错啦:', error)
      })
  }
})

HTML代码：

<script src="https://unpkg.com/vue"></script>
<!-- 必须引入Axios！ -->
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<div id="app">
  <!-- 可以优化模板，避免显示null -->
  <div v-if="info">
    <h3>当前比特币价格</h3>
    <p>美元: {{ info.bpi.USD.rate }}</p>
    <p>英镑: {{ info.bpi.GBP.rate }}</p>
    <p>欧元: {{ info.bpi.EUR.rate }}</p>
  </div>
  <div v-else>数据加载中...</div>
</div>

额外提示： #

• 用v-if="info"可以避免数据还没加载完成时显示null，提升用户体验；
• 加上catch捕获错误，万一API请求失败，能在控制台看到错误信息，方便排查问题；
• 如果是Vue CLI项目，推荐用npm install axios安装，然后在组件里import axios from 'axios'使用，比CDN更灵活。

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