基于axios在vue中的使用

下面就来详细讲解“基于axios在vue中的使用”的完整攻略，过程中我将包含两条示例说明。

1. 安装axios

在使用axios之前，需要先安装它。可以使用npm安装，执行以下命令：

npm install axios

2. 引入axios

在vue项目中，通常会在main.js文件中引入axios：

import axios from 'axios'
Vue.prototype.$http = axios

上述代码的含义是将axios挂载到Vue实例的原型上，这样就可以通过this.$http来访问axios。

3. 发送GET请求

使用axios发送GET请求，可以通过以下代码实现：

this.$http.get('https://jsonplaceholder.typicode.com/posts')
  .then(response => {
    console.log(response.data)
  })
  .catch(error => {
    console.log(error)
  })

上述代码中，我们通过this.$http来访问axios，并调用get方法发送GET请求。传入的参数为请求的地址，这里使用了一个在线HTTP测试网站提供的API。

发送请求后，通过Promise处理响应结果，其中response.data即为请求返回的数据。如果出现错误，通过catch来捕捉并输出错误信息。

4. 发送POST请求

与GET请求相比，POST请求需要传递数据，可以通过以下代码实现：

this.$http.post('https://jsonplaceholder.typicode.com/posts', {
    title: 'foo',
    body: 'bar',
    userId: 1
  })
  .then(response => {
    console.log(response.data)
  })
  .catch(error => {
    console.log(error)
  })

上述代码中，第二个参数是要发送的数据，这里使用了一个对象，包含了一个title、body和userId属性，分别对应服务器端需要的参数。

同样地，我们也使用了Promise处理响应结果，并输出了请求返回的数据或错误信息。

以上就是基于axios在vue中的使用攻略。下面提供两个示例说明：

示例一：使用axios获取Github API的用户信息

<template>
  <div>
    <h3>{{ user.login }}</h3>
    <img :src="user.avatar_url" />
    <p>{{ user.bio }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      user: {}
    }
  },
  mounted() {
    this.$http.get('https://api.github.com/users/vuejs')
      .then(response => {
        this.user = response.data
      })
      .catch(error => {
        console.log(error)
      })
  }
}
</script>

以上代码会在页面中显示Github的Vue.js官方账号的用户名、头像和个人介绍。

示例二：使用axios提交表单数据

<template>
  <div>
    <form @submit.prevent="submitForm">
      <label>
        名字：
        <input type="text" v-model="name" />
      </label>
      <button type="submit">提交</button>
    </form>
    <p v-if="status">{{ status }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      name: '',
      status: ''
    }
  },
  methods: {
    submitForm() {
      this.$http.post('https://jsonplaceholder.typicode.com/posts', {
          name: this.name
        })
        .then(response => {
          this.status = '提交成功'
        })
        .catch(error => {
          console.log(error)
        })
    }
  }
}
</script>

以上代码会显示一个表单，包含一个名字输入框和一个提交按钮。当提交按钮被点击时，会通过axios将输入的名字发送到服务器上。成功后会显示提交成功。