笔记：vue2简单引用接口数据：$http、 axios、ajax

在Vue 2项目中，您可以使用几种方法来引用接口数据，包括$http（如果您使用了像Vue Resource这样的插件）、axios（现代、灵活的HTTP客户端）和原生的XMLHttpRequest或fetch API。

以下是使用这些方法的简单示例：

1. 使用Vue Resource ($http):

// 安装Vue Resource插件
import VueResource from 'vue-resource';
Vue.use(VueResource);
 
// 在组件中使用$http
export default {
  mounted() {
    this.$http.get('your-api-endpoint')
      .then(response => {
        console.log(response.body); // 处理响应数据
      })
      .catch(error => {
        console.error(error); // 处理错误
      });
  }
}

2. 使用axios:

// 引入axios
import axios from 'axios';
 
// 在组件中使用axios
export default {
  mounted() {
    axios.get('your-api-endpoint')
      .then(response => {
        console.log(response.data); // 处理响应数据
      })
      .catch(error => {
        console.error(error); // 处理错误
      });
  }
}

3. 使用原生XMLHttpRequest API:

// 在组件中使用XMLHttpRequest
export default {
  mounted() {
    const xhr = new XMLHttpRequest();
    xhr.open('GET', 'your-api-endpoint');
    xhr.onload = () => {
      if (xhr.status === 200) {
        console.log(JSON.parse(xhr.responseText)); // 处理响应数据
      } else {
        console.error(xhr.statusText); // 处理错误
      }
    };
    xhr.send();
  }
}

4. 使用原生fetch API:

// 在组件中使用fetch
export default {
  mounted() {
    fetch('your-api-endpoint')
      .then(response => {
        if (!response.ok) {
          throw new Error('Network response was not ok ' + response.statusText);
        }
        return response.json();
      })
      .then(data => {
        console.log(data); // 处理响应数据
      })
      .catch(error => {
        console.error(error); // 处理错误
      });
  }
}

在实际应用中，您可能需要考虑错误处理、请求取消、请求配置（如headers、timeout等）以及在Vuex中管理状态等问题。选择哪种方法取决于您的项目需求和个人喜好。