vue项目及axios请求获取数据方式

Vue.js 是一款流行的前端框架，可以帮助前端开发者构建复杂的单页应用程序。使用 axios 可以方便地获取和传递数据。本文将提供关于 Vue.js 项目及 axios 请求获取数据的完整攻略。

安装 Axios

Axios 是一个现代的基于 Promise 的 HTTP 请求库，它用于浏览器和 Node.js。在 Vue.js 项目中使用 Axios，首先需要在项目中安装它。在终端中，输入下面的命令：

npm install axios --save

发送 GET 请求

发送 GET 请求是最常见的请求类型。在 Vue.js 项目中，使用 axios.get() 函数来发送一个 GET 请求。

下面是一个示例，使用一个 API 来获取电影列表：

<template>
  <div>
    <h2>电影列表</h2>
    <ul>
      <li v-for="movie in movies" :key="movie.id">{{ movie.title }}</li>
    </ul>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      movies: []
    }
  },
  mounted() {
    axios.get('https://api.example.com/movies')
      .then(response => {
        this.movies = response.data;
      })
      .catch(error => {
        console.log(error);
      });
  }
}
</script>

上述代码中， axios.get() 函数使用了一个 URL，该 URL 返回一个 JSON 格式的电影列表数据。通过调用 response.data 来访问这个数据，接着将其赋值到 Vue 组件实例的 data 属性中的 movies，随后在模板中将它进行渲染展示。

发送 POST 请求

在 Vue.js 项目中，使用 axios.post() 函数来发送一个 POST 请求。下面是一个示例，该请求将一个新增的电影数据添加到 API 中：

<template>
  <div>
    <form @submit.prevent="addMovie">
      <input type="text" v-model="newMovie.title" placeholder="请输入电影名称">
      <button type="submit">添加</button>
    </form>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      newMovie: {}
    }
  },
  methods: {
    addMovie() {
      axios.post('https://api.example.com/movies', this.newMovie)
        .then(response => {
          console.log(response.data);
        })
        .catch(error => {
          console.log(error);
        });
    }
  }
}
</script>

上述代码中，我们提供了一个表单来输入新增的电影信息，这些信息被绑定在 newMovie 对象中，并在 addMovie 方法中发送 POST 请求，将 newMovie 对象作为请求体传到 API 中。

这两种方式仅仅是 axios 的冰山一角，axios 还支持很多类型的请求、拦截器、取消请求等等，有兴趣的读者可以去 axios 官网了解更多。