若依框架中的请求流程详解

在若依框架中，一个完整的前端 UI 交互到服务端处理的流程包括以下几个步骤：UI 组件的交互操作、调用统一管理的 API 服务请求函数、使用封装的 request.js 发送请求、获取服务端返回结果并更新前端数据。为了便于维护和管理，所有的请求处理通常集中在 @/src/api 目录下，并按照模块进行拆分。

一、请求流程的整体交互步骤

1. UI 组件交互操作： 用户通过前端 UI 组件触发交互操作，例如点击按钮、提交表单等。

2. 调用 API 服务请求函数： 在组件中调用统一管理的 API 服务函数，这些函数通常定义在 @/src/api 目录下，按照模块进行分类。

3. 发送请求： API 服务函数使用 @/src/utils/request.js 封装的请求方法（基于 axios），将请求发送到服务端。

4. 获取服务端返回： 请求发送后，获取服务端返回的数据或错误信息，并在前端进行处理。

5. 更新数据： 根据返回结果，更新组件中的数据，触发页面的重新渲染。

通过这样的流程，可以有效地将前端的请求管理和后端的处理逻辑分开，便于维护和调试。

二、请求管理的目录结构和组织方式

在若依框架中，所有的请求通常都放在 @/src/api 目录下进行管理。每个模块有一个或多个 API 服务文件，按功能模块划分，例如：

api/
  system/
    user.js       # 用户管理相关 API
    role.js       # 角色管理相关 API
  monitor/
    operlog.js    # 操作日志相关 API
    logininfor.js # 登录信息相关 API
  ...

1. 模块化请求的读取与管理

在若依前后端分离版本的 Vue 项目中，所有的请求都是模块化管理的。通常，若依的 Vue 项目会将所有的 API 请求定义在 src/api 目录下，每个模块对应一个独立的 JavaScript 文件。例如，用户管理的 API 可能会定义在 user.js 文件中，角色管理的 API 会定义在 role.js 文件中。

若依的 Vue 项目使用 axios 进行 HTTP 请求，所有的 API 请求都会在各自的模块文件中定义，并通过 export 导出相应的方法。然后，这些方法可以在其他组件中通过 import 导入并使用。

主要步骤如下：

1. 定义 API 模块： 每个模块的 API 定义在 src/api 目录下的对应文件中。例如：

   // src/api/user.js
   import request from '@/utils/request';
   
   export function login(data) {
     return request({
       url: '/login',
       method: 'post',
       data: data
     });
   }
   
   export function getUserInfo() {
     return request({
       url: '/getInfo',
       method: 'get'
     });
   }
   

2. 请求工具配置： 若依项目中有一个 utils/request.js 文件，这个文件配置了 axios 实例，并为每个请求统一添加拦截器、错误处理等功能：

   import axios from 'axios';
   import { getToken } from '@/utils/auth';
   
   const service = axios.create({
     baseURL: process.env.VUE_APP_BASE_API, // api 的 base_url
     timeout: 5000 // request timeout
   });
   
   // request拦截器
   service.interceptors.request.use(
     config => {
       if (getToken()) {
         config.headers['Authorization'] = 'Bearer ' + getToken(); // 让每个请求携带token
       }
       return config;
     },
     error => {
       // Do something with request error
       return Promise.reject(error);
     }
   );
   
   // response 拦截器
   service.interceptors.response.use(
     response => {
       return response.data;
     },
     error => {
       // Do something with response error
       return Promise.reject(error);
     }
   );
   
   export default service;
   

3. 在组件中使用 API： 在 Vue 组件中，通过 import 导入对应的 API 方法，并进行调用。例如：

   import { login } from '@/api/user';
   
   export default {
     methods: {
       handleLogin() {
         this.$refs.loginForm.validate(valid => {
           if (valid) {
             login(this.loginForm).then(response => {
               // 处理登录成功的逻辑
             });
           } else {
             console.log('error submit!!');
             return false;
           }
         });
       }
     }
   };
   

2. 如何读取所有请求的模块

若依项目通常是按需加载的方式，即在需要的地方导入对应模块中的请求函数。不会有一个全局性的自动加载机制去读取所有请求的模块，而是通过显式 import 的方式来引用各个模块。这种模块化的管理方式有助于代码的分离和维护。

在某些情况下，项目可能会使用 Webpack 的 require.context 方法来动态加载模块，但若依项目通常不使用这种方式。require.context 可以用于批量导入模块，如果项目中有使用这个方法，你可以在 src 目录中搜索 require.context 来确认。

三、request.js 的封装与功能

@/src/utils/request.js 是基于 axios 封装的请求工具类，它提供了一些常用的功能和统一处理机制：

• 全局请求拦截器： 在请求发送前对请求进行统一处理，如设置请求头。
• 全局响应拦截器： 在收到响应后进行统一处理，如错误提示和数据格式化。
• 统一的错误处理： 对于常见的 HTTP 错误进行统一的处理和提示。
• 超时处理： 设置请求的超时时间，避免请求长时间未响应。
• baseURL 设置： 可以全局或局部设置请求的 baseURL，适配不同的后端服务地址。

四、请求的具体实现示例

以下是一个用户管理模块中 listUser 方法的实现示例，展示了如何通过封装好的 request.js 发送 GET 请求，并在前端页面中调用该 API 服务：

// api/system/user.js
import request from '@/utils/request'

// 查询用户列表
export function listUser(query) {
  return request({
    url: '/system/user/list', // 请求的后端接口路径
    method: 'get', // 请求的方法类型
    params: query // 请求的参数（GET请求通常使用params）
  })
}

在前端页面中，可以通过以下方式调用该 API 服务，并将数据绑定到组件的数据对象中：

// views/system/user/index.vue
import { listUser } from "@/api/system/user";

export default {
  data() {
    return {
      userList: null, // 用户列表数据
      loading: true   // 加载状态
    }
  },
  methods: {
    // 获取用户列表数据
    getList() {
      this.loading = true;
      listUser().then(response => {
        this.userList = response.rows; // 将返回的数据绑定到 userList
        this.loading = false; // 请求完成后关闭加载状态
      }).catch(error => {
        this.loading = false;
        console.error('Error fetching user list:', error); // 错误处理
      });
    }
  },
  mounted() {
    this.getList(); // 页面加载时获取用户列表数据
  }
}

五、配置不同的 baseURL

在若依的前端 Vue 项目中，baseURL 的切换以及开发和生产环境的切换是通过环境变量和配置文件来实现的。这些机制在项目打包和部署时会自动切换到相应的配置。以下是具体的实现方式：

1. 环境变量文件

若依的 Vue 项目通常在根目录下有多个环境变量文件，例如：

• .env.development：开发环境的配置文件
• .env.production：生产环境的配置文件
• .env.test：测试环境的配置文件

每个环境变量文件定义了不同环境下的变量，例如 VUE_APP_BASE_API，用于设置 API 的 baseURL。

# .env.development
VUE_APP_BASE_API = '/dev-api'

# .env.production
VUE_APP_BASE_API = '/prod-api'

# .env.test
VUE_APP_BASE_API = '/test-api'

2. 配置 Axios 的 baseURL

在 src/utils/request.js 文件中，axios 实例的 baseURL 是通过环境变量来配置的：

import axios from 'axios';

// 创建 axios 实例
const service = axios.create({
  baseURL: process.env.VUE_APP_BASE_API, // 使用环境变量中的 VUE_APP_BASE_API
  timeout: 5000 // 请求超时时间
});

export default service;

这里的 process.env.VUE_APP_BASE_API 会根据当前的环境自动选择相应的 baseURL。例如在开发环境下，它会读取 .env.development 中的 VUE_APP_BASE_API。

3. 环境切换

在开发和生产环境之间切换时，Vue CLI 使用的 NODE_ENV 环境变量会自动识别当前的环境，并加载对应的环境变量文件。

• 开发环境：当运行 npm run serve 时，NODE_ENV 被设置为 development，Vue CLI 会加载 .env.development 中的配置。
• 生产环境：当运行 npm run build 时，NODE_ENV 被设置为 production，Vue CLI 会加载 .env.production 中的配置。

# package.json
"scripts": {
  "serve": "vue-cli-service serve",
  "build": "vue-cli-service build",
  "test:unit": "vue-cli-service test:unit"
}

4. 打包时的自动切换

当你执行 npm run build 时，Vue CLI 会根据 NODE_ENV 环境变量选择相应的环境配置文件（例如 .env.production），并自动将配置应用到打包的代码中。这意味着 baseURL 等配置会根据当前环境自动切换，无需手动干预。

5. 自定义环境

如果需要自定义更多的环境，例如预生产环境，可以添加一个新的 .env.staging 文件，并在 package.json 中添加对应的脚本：

# .env.staging
VUE_APP_BASE_API = '/staging-api'

# package.json
"scripts": {
  "serve": "vue-cli-service serve",
  "build": "vue-cli-service build",
  "build:staging": "vue-cli-service build --mode staging"
}

这样，在执行 npm run build:staging 时，项目将使用 .env.staging 中的配置进行打包。

六、引入外部依赖

在开发过程中，有时需要引入第三方库或外部组件。以 vue-count-to 为例，以下是如何在项目中引入和使用的流程：

1. 安装依赖： 在项目根目录下运行以下命令安装依赖包，并将其添加到 package.json 中：

   npm install vue-count-to --save
   

2. 在组件中使用： 在需要使用的组件中引入 vue-count-to 并进行使用：

   import VueCountTo from 'vue-count-to';
   
   export default {
     components: {
       VueCountTo
     },
     template: `
       <div>
         <vue-count-to :startVal="0" :endVal="100" :duration="2000"></vue-count-to>
       </div>
     `
   }