Vue中Axios的使用详解

Axios是一个基于Promise的HTTP客户端，可以和任何类jQuery的XHR库一起使用。在Vue开发中，我们常常使用Axios来进行API请求和数据交互。

安装

可以使用npm或yarn来安装Axios

npm install axios
# 或
yarn add axios

使用

在Vue组件中可以通过this.$http或this.$axios来使用。

// 全局引入
import axios from 'axios'
Vue.prototype.$http = axios

// 组件中使用
this.$http({
  method: 'get',
  url: 'https://www.example.com/api'
})

发送GET请求

this.$http.get('/api').then(response => {
  console.log(response.data)
})

发送POST请求

this.$http.post('/api', { name: 'John Doe' }).then(response => {
  console.log(response.data)
})

请求拦截和响应拦截

可以通过interceptors来设置请求拦截和响应拦截。请求拦截可以用来设置请求头部或验证用户身份；响应拦截可以用来处理滚动条、重定向或在获取到数据后进行统一的处理。

// 添加请求拦截器
this.$http.interceptors.request.use(config => {
  // 在发送请求之前做些什么
  config.headers.Authorization = `Bearer ${localStorage.getItem('token')}`
  return config
}, error => {
  // 对请求错误做些什么
  return Promise.reject(error)
})

// 添加响应拦截器
this.$http.interceptors.response.use(response => {
  // 对响应数据做点什么
  return response
}, error => {
  // 对响应错误做点什么
  return Promise.reject(error)
})

示例1：使用Axios获取数据并显示

在mounted中使用Axios获取数据，使用v-for指令将数据显示在HTML中。

<template>
  <ul>
    <li v-for="user in users" :key="user.id">
      {{ user.name }}
    </li>
  </ul>
</template>

<script>
import axios from 'axios'

export default {
  data () {
    return {
      users: []
    }
  },
  mounted () {
    axios.get('https://api.github.com/users')
      .then(response => {
        this.users = response.data
      })
  }
}
</script>

示例2：使用Axios提交表单

在onSubmit方法中使用Axios提交表单数据，在响应拦截中进行重定向。

<template>
  <form @submit.prevent="onSubmit">
    <label>Username:</label>
    <input type="text" v-model="user.username">
    <label>Password:</label>
    <input type="password" v-model="user.password">
    <button type="submit">Submit</button>
  </form>
</template>

<script>
import axios from 'axios'

export default {
  data () {
    return {
      user: {
        username: '',
        password: ''
      }
    }
  },
  methods: {
    onSubmit () {
      axios.post('/login', this.user)
        .then(response => {
          console.log(response.data)
          this.$router.push('/dashboard')
        })
    }
  }
}
</script>