详解vue中axios封装与api接口封装管理

下面我将详细讲解一下“详解vue中axios封装与api接口封装管理”的完整攻略。

一、vue中axios的封装

1. 安装axios

在vue项目中，我们需要先安装axios，可以使用npm或者yarn安装，这里以npm为例：

npm install axios --save

2. 封装axios实例

在项目中，我们一般都需要对axios进行封装，这样可以方便我们在项目中进行统一管理。我们可以新建一个文件axios.js，并在其中封装axios实例。

import axios from 'axios'

const instance = axios.create({
  baseURL: 'http://api.example.com', // 接口的域名地址
  timeout: 5000, // 请求超时时间
})

// 添加请求拦截器
instance.interceptors.request.use(
  function(config) {
    // 在发送请求之前做些什么
    return config
  },
  function(error) {
    // 对请求错误做些什么
    return Promise.reject(error)
  }
)

// 添加响应拦截器
instance.interceptors.response.use(
  function(response) {
    // 对响应数据做点什么
    return response.data
  },
  function(error) {
    // 对响应错误做点什么
    return Promise.reject(error)
  }
)

export default instance

在以上封装代码中，我们主要是对axios实例进行了基本的配置，并且添加了请求拦截器和响应拦截器，这样针对每个请求，我们就可以进行统一的配置和处理。

3. 使用封装好的axios

在项目中，我们就可以通过如下方式使用封装好的axios实例：

import axios from '@/utils/axios'

axios.get('/user/info').then((res) => {
  console.log(res)
})

其中，@/utils/axios是我们封装好的axios实例所在文件的相对路径。

二、api接口的封装管理

1. 目录结构

在常见的vue项目中，我们一般会将接口文件单独放置在一个目录下，视项目规模和复杂度可以适当扩充目录结构。例如：

├── api
│   ├── index.js
│   ├── user.js
│   └── ...
└── ...

其中，api/index.js文件负责对所有接口进行统一的管理和导出。

2. 编写api接口

我们可以在api目录下新建一个user.js文件，编写用户接口相关的代码，示例如下：

import axios from '@/utils/axios'

export function getUserInfo(params) {
  return axios.get('/user/info', { params })
}

export function updateUser(id, data) {
  return axios.put(`/user/${id}`, data)
}

export function deleteUser(id) {
  return axios.delete(`/user/${id}`)
}

3. 统一管理

在api目录下编写index.js文件，用于导出所有接口：

import * as user from './user'

export default {
  user,
  // 可以添加其他模块的api
}

这样，我们在组件中就可以这样调用接口：

import api from '@/api'

api.user.getUserInfo({ id: 1 }).then((res) => {
  console.log(res)
})

这样的好处是，我们可以将接口统一管理起来，方便维护和管理。另外，我们也可以方便地给接口添加通用的请求拦截器和响应拦截器。