Vue-Element-Admin 网络请求封装剖析

2024-01-12 18:44:38





网络请求是 Vue-Element-Admin 中必不可少的环节，它负责与后端服务器进行数据交互。为了使网络请求更加方便和高效，Vue-Element-Admin 对网络请求进行了封装，提供了统一的接口和配置。

Vue-Element-Admin 的网络请求封装主要基于 axios 库。axios 是一个功能强大的 JavaScript HTTP 库，它提供了简单易用的 API，可以轻松地进行各种 HTTP 请求。

**网络请求封装的整体思路如下：** 

1. 创建 axios 实例
2. 添加请求和响应拦截器
3. 导出实例

**1. 创建 axios 实例** 

Vue-Element-Admin 在 `src/utils/request.js` 文件中创建了一个 axios 实例。实例的创建代码如下：

```javascript
import axios from 'axios'

const instance = axios.create({
  baseURL: process.env.VUE_APP_BASE_API,
  timeout: 60000
})

在创建实例时，需要指定一些基本配置，包括：

baseURL：后端服务器的基准 URL。
timeout：请求超时时间，单位为毫秒。

2. 添加请求和响应拦截器

Vue-Element-Admin 在创建 axios 实例后，添加了请求和响应拦截器。请求拦截器的目的是在发出请求之前对请求进行处理，响应拦截器的目的是在收到响应之后对响应进行处理。

请求拦截器的代码如下：

instance.interceptors.request.use(
  config => {
    // 为请求头添加 token 信息
    if (token) {
      config.headers.Authorization = `Bearer ${token}`
    }
    return config
  },
  error => {
    // 处理请求错误
    return Promise.reject(error)
  }
)

请求拦截器的主要功能就是为请求加上 token 信息。token 是用户登录后获得的令牌，用于验证用户的身份。在发出请求之前，需要将 token 添加到请求头中，这样才能访问受保护的资源。

响应拦截器的代码如下：

instance.interceptors.response.use(
  response => {
    // 处理响应数据
    return response.data
  },
  error => {
    // 处理响应错误
    return Promise.reject(error)
  }
)

响应拦截器的主要功能则是做各种错误处理。当收到响应后，需要检查响应的状态码，如果状态码不为 200，则认为请求失败，需要抛出错误。

3. 导出实例

Vue-Element-Admin 在创建 axios 实例并添加了请求和响应拦截器之后，将其导出，以便其他模块可以使用。导出代码如下：

export default instance

如何使用封装好的网络请求

其他模块可以使用导入的 axios 实例来进行网络请求。例如，在 src/views/user/index.vue 文件中，有一个获取用户列表的函数，代码如下：

import request from '@/utils/request'

export default {
  name: 'UserList',
  data() {
    return {
      users: []
    }
  },
  created() {
    this.fetchUsers()
  },
  methods: {
    fetchUsers() {
      request({
        url: '/users',
        method: 'get'
      }).then(res => {
        this.users = res.data
      })
    }
  }
}