Vue中Axios的封装与API接口的管理详解

在Vue项目中，使用Axios进行API请求是比较常见的方法，但是在实际开发过程中，如果不进行封装和管理，会出现以下问题：

1. 在多处代码中重复使用相同的Axios配置。
2. 每次请求都需要手动编写URL、参数、请求方式等信息，难以管理。
3. 当后台API接口发生变化时，需要修改所有使用该接口的代码。

因此，对Axios进行封装和API管理是必要的。本文将详细讲解如何在Vue中优雅地管理和封装Axios。

Axios的封装

首先安装Axios依赖：

npm install axios --save-dev

Axios的封装分为三个部分：

1. 创建axios实例
2. 请求拦截器
3. 响应拦截器

1. 创建axios实例

在项目中创建一个axios.js文件，用于创建axios实例。在该文件中，可以设置Axios的一些全局配置，例如：baseURL、timeout等。

示例1：

import axios from 'axios'

const instance = axios.create({
  baseURL: 'http://localhost:3000', // 设置请求的baseURL
  timeout: 10000 // 设置请求的超时时间
})

export default instance

在上述示例中，创建了一个名为instance的Vue实例，并设置了baseURL和timeout参数。

2. 请求拦截器

请求拦截器可以在每次请求之前进行特定的操作，例如：在请求header中添加特定的token，或者在请求超时时进行提示等。

示例2：

import axios from './axios'

const service = axios

service.interceptors.request.use(
  config => {
    const token = localStorage.getItem('token') // 从localstorage中获取token
    if (token) {
      config.headers['Authorization'] = token // 在header中添加Authorization
    }
    return config
  },
  error => {
    console.log(error) // 请求错误时输出错误信息
    return Promise.reject(error)
  }
)

export default service

在上述示例中，首先引入了之前创建的axios实例，在它上面添加了请求拦截器。在拦截器中，从localStorage中获取token，并将其保存在请求的header中。如果请求出现错误，则在控制台中输出错误信息，并返回一个reject状态的Promise对象。

3. 响应拦截器

响应拦截器可以在每次请求之后进行操作，在拦截器中，可以对后台返回的数据进行统一的处理。

示例3：

import axios from './axios'

const service = axios

service.interceptors.response.use(
  response => {
    const res = response.data

    if (res.code !== 200) { // 判断后台返回的状态码是否为200
      console.log(res.message) // 输出错误信息
      return Promise.reject(res.message)
    } else {
      return res.data
    }
  },
  error => {
    console.log(error) // 请求错误时打印错误信息
    return Promise.reject(error)
  }
)

export default service

在上述示例中，同样是在之前创建的axios实例中添加响应拦截器，在拦截器中，判断后台返回的数据状态码是否为200，如果不是，则输出错误信息并返回一个reject状态的Promise对象，否则返回响应数据。

API接口的管理

了解了如何封装Axios之后，接下来我们将介绍如何在Vue项目中管理API接口。在项目中，可以将API接口进行管理，将所有的API接口都封装成独立的模块，方便统一的管理。

示例4：

import request from '../utils/request'

export function getUserInfo (params) {
  return request({
    url: '/user/info',
    method: 'get',
    params
  })
}

export function login (data) {
  return request({
    url: '/user/login',
    method: 'post',
    data
  })
}

在以上示例中，可以看到我们将getUserInfo和login这两个API接口封装成了一个独立的模块，分别对应了不同的请求方式和参数。在每个API接口中，调用我们之前封装的Axios实例，并将请求的url、请求方法和参数传入即可。

示例5：

import { getUserInfo } from '@/api/user'

getUserInfo({ id: 1 }).then(res => {
  console.log(res)
}).catch(err => {
  console.log(err)
})

在上述示例中，我们使用之前封装好的getUserInfo接口向后台请求数据。在项目中，当需要使用某个API接口时，只需要引入对应的模块，即可直接调用其中的方法。

通过以上的封装和管理，我们可以在Vue项目中优雅地使用Axios，并且在后台API接口进行更改时，只需要修改对应的接口方法即可，不用修改每个调用该接口的文件。