Vue项目中axios的使用（基础篇）

Axios是什么？

Axios是一个基于Promise的HTTP客户端，可以用在浏览器和Node.js中。它有很多优点，比如支持Promise API、拦截请求和响应、取消请求、自动转换JSON数据等。在Vue项目中，我们可以使用Axios来发送HTTP请求，获取数据并展示到页面上。

安装Axios

在Vue项目中使用Axios，我们需要先安装Axios。我们可以通过如下命令来安装Axios：

npm install axios --save

引入Axios

在安装Axios之后，我们需要在Vue项目中引入Axios。在Vue中，我们可以在main.js文件中引入Axios：

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

在上面的代码中，我们通过import语句将Axios引入到我们的Vue项目中。然后，我们将Axios赋值给Vue的原型对象$axios，这样我们就可以在Vue实例中通过this.$axios来使用Axios了。

发送HTTP请求

在Vue项目中，我们可以通过Axios来发送HTTP请求，获取数据并展示到页面上。在Axios中，我们可以通过如下代码来发送一个GET请求：

this.$axios.get('/api/user')
  .then(response => {
    // 处理成功的响应
  })
  .catch(error => {
    // 处理错误的响应
  })

在上面的代码中，我们通过axios.get()方法来发送一个GET请求。axios.get()方法返回一个Promise对象，我们可以通过then()方法和catch()方法来分别处理成功的响应和错误的响应。

在GET请求中，我们可以通过向axios.get()方法传递第二个参数来设置请求参数。在如下例子中，我们向GET请求中传递了一个参数name，它的值为John：

this.$axios.get('/api/user', {
  params: {
    name: 'John'
  }
})

在POST请求中，我们可以通过向axios.post()方法传递第二个参数来设置请求数据。在如下例子中，我们向POST请求中传递了一个数据对象，它的属性为name和age，它们的值分别为John和25：

this.$axios.post('/api/user', {
  name: 'John',
  age: 25
})

拦截器

Axios提供了拦截器的功能，我们可以在请求或响应被处理之前对它们进行拦截和处理。在Vue项目中，我们可以使用拦截器来添加公共的请求头、处理请求错误、处理响应错误等操作。

请求拦截器

在Axios中，我们可以通过如下代码来添加请求拦截器：

this.$axios.interceptors.request.use(
  config => {
    // 在请求发送之前做些什么
    config.headers.Authorization = getToken()
    return config
  },
  error => {
    // 对请求错误
    return Promise.reject(error)
  }
)

在上面的代码中，我们通过axios.interceptors.request.use()方法来添加请求拦截器。该方法接受两个参数：一个是请求成功时的回调函数，另一个是请求失败时的回调函数。

在成功的回调函数中，我们可以对请求进行一些处理，比如添加公共的请求头。在如上例子中，我们向请求中添加了一个Authorization请求头，它的值为getToken()函数的返回值。

在失败的回调函数中，我们可以处理请求错误。在如上例子中，我们通过Promise.reject()方法将错误返回，这样我们就可以在后面的catch()方法中捕获到该错误。

响应拦截器

在Axios中，我们可以通过如下代码来添加响应拦截器：

this.$axios.interceptors.response.use(
  response => {
    // 对响应数据做些什么
    return response.data
  },
  error => {
    // 对响应错误做些什么
    if (error.response) {
      switch (error.response.status) {
        case 401:
          // 未登录，跳转到登录页
          break
        case 404:
          // 404错误，跳转到404页面
          break
        case 500:
          // 500错误，跳转到500页面
          break
      }
    }
    return Promise.reject(error)
  }
)

在上面的代码中，我们通过axios.interceptors.response.use()方法来添加响应拦截器。该方法接受两个参数：一个是响应成功时的回调函数，另一个是响应失败时的回调函数。

在成功的回调函数中，我们可以对响应进行一些处理，比如获取响应数据。在如上例子中，我们通过return response.data语句将响应数据返回。

在失败的回调函数中，我们可以处理响应错误。在如上例子中，我们判断了响应错误的状态码，如果是401错误，则跳转到登录页；如果是404错误，则跳转到404页面；如果是500错误，则跳转到500页面。在处理完错误之后，我们通过Promise.reject()方法将错误返回，这样我们就可以在后面的catch()方法中捕获到该错误。

使用Axios实现API调用

在Vue项目中，我们通常需要调用API来获取数据并展示到页面上。在使用Axios调用API时，我们可以在API文件中定义一个函数，它使用Axios来发送HTTP请求并返回Promise对象。

在如下例子中，我们定义了一个getUser()函数，它使用Axios来发送GET请求并返回Promise对象。在函数中，我们通过axios.get()方法来发送GET请求，并将响应数据返回。

import axios from 'axios'

export function getUser(id) {
  return axios.get(`/api/user/${id}`)
    .then(response => {
      return response.data
    })
}

在组件中，我们可以通过调用getUser()函数来获取数据并展示到页面上。在如下例子中

<template>
  <div>
    <h1>{{ user.name }}</h1>
    <p>{{ user.email }}</p>
  </div>
</template>

<script>
import { getUser } from '@/api/user'

export default {
  data() {
    return {
      user: {}
    }
  },
  async created() {
    const id = this.$route.params.id
    try {
      this.user = await getUser(id)
    } catch (error) {
      console.log(error)
    }
  }
}
</script>

在上面的代码中，我们在组件的created()生命周期函数中调用了getUser()函数来获取用户数据，并将用户数据保存到组件的user数据中。在调用getUser()函数时，我们使用了async/await语法来处理异步请求，这样我们就可以将请求结果直接赋值给user数据，而不需要通过回调函数来获取请求结果。

在调用getUser()函数时，我们通过try/catch语法来处理请求错误。如果请求出现错误，我们将错误打印到控制台中，这样我们就可以很容易地找到错误并进行处理。

结论

Axios是一个非常强大且易于使用的HTTP客户端库，它可以帮助我们轻松地发送HTTP请求并处理请求结果。在Vue项目中，我们通常会使用Axios来调用API并获取数据。通过使用Axios的请求拦截器和响应拦截器，我们可以轻松地处理请求和响应，并在出现错误时进行处理。