如何在Vue中使用Axios实现后端数据请求

如何在Vue中使用Axios实现后端数据请求

import axios from 'axios';

export default {
  name: 'app',
  data() {
    return {
      posts: [],
      error: ''
    };
  },
  created() {
    this.fetchPosts();
  },
  methods: {
    fetchPosts() {
      axios.get('https://jsonplaceholder.typicode.com/posts')
        .then(response => {
          this.posts = response.data;
        })
        .catch(error => {
          this.error = error.message;
        });
    }
  }
};

实现效果：

以上代码会在创建Vue组件的时候获取来自JSONplaceholder上的文章，并将数据存储在组件中的posts data property中。

数据请求由Axios来发起，这是一个流行的第三方库，因为它既灵活又易于使用。