Vue中接口调用

在Vue中调用接口，通常使用axios库，它基于Promise，适用于浏览器和node.js。首先需要安装axios：

npm install axios

然后在Vue组件中使用axios：

<template>
  <div>
    <h1>用户信息</h1>
    <p>{{ userInfo.name }}</p>
  </div>
</template>
 
<script>
import axios from 'axios';
 
export default {
  data() {
    return {
      userInfo: {}
    };
  },
  created() {
    this.fetchUserInfo();
  },
  methods: {
    fetchUserInfo() {
      axios.get('https://api.example.com/user/info')
        .then(response => {
          this.userInfo = response.data;
        })
        .catch(error => {
          console.error('There was an error!', error);
        });
    }
  }
};
</script>

在这个例子中，当组件被创建时（created 钩子），它调用fetchUserInfo 方法，该方法使用axios.get调用API接口，并在.then中处理响应数据，将其赋值给userInfo数据属性。如果在请求过程中出现错误，它会在.catch中被捕获并打印错误信息。