Vue进行post和get请求实例讲解

Vue.js是一款轻量级的JavaScript框架，且它提供了强大的数据绑定和交互功能，于是很多web开发人员喜欢使用Vue.js开发web应用。常见的web应用需要从服务器获取数据，而请求方式一般有POST和GET两种，在Vue.js中，使用axios库可方便地进行POST和GET请求。

axios库简介

axios是一个基于Promise的HTTP客户端，可以用于浏览器和Node.js。在Vue.js中，可以通过引入axios库，来处理数据的请求和响应。

安装

可以通过npm进行安装

npm install axios

GET请求示例

下面是一个使用axios库进行GET请求的示例，以拉取文章列表为例。

import axios from 'axios'

export default {
  data () {
    return {
      articles: []
    }
  },
  mounted () {
    axios.get('/api/articles')
      .then(response => {
        this.articles = response.data
      })
      .catch(error => {
        console.log(error)
      })
  }
}

首先，在组件的data选项中初始化了articles数组，用于存储从服务器获取的文章列表数据。

在mounted生命周期中，使用axios.get()方法向服务器发送GET请求，请求地址为"/api/articles"。

这里使用Promise的then()方法处理请求的响应，在响应中将获取到的列表数据赋值给articles数组，这样就可以在模板中使用articles数据展示获取到的文章列表。

同时，在catch()方法中，如果请求失败，则打印错误信息至控制台。

POST请求示例

下面是一个使用axios库进行POST请求的示例，以用户登录为例。

import axios from 'axios'

export default {
  data () {
    return {
      email: '',
      password: ''
    }
  },
  methods: {
    login () {
      axios.post('/api/login', {
        email: this.email,
        password: this.password
      })
        .then(response => {
          if (response.data.success) {
            // 登录成功
          } else {
            // 登录失败
          }
        })
        .catch(error => {
          console.log(error)
        })
    }
  }
}

在这个组件中，我们初始化了email和password两个数据，在login()方法中，使用axios.post()方法向服务器发送POST请求，其中请求地址为"/api/login"，请求的数据为email和password。

和GET请求情况类似，在POST请求时我们同样需要使用Promise的then()方法和catch()方法进行响应的处理。在这个示例中，在处理响应时，如果登录成功，则进行相关的操作，否则给出登录失败提示。