Vue 项目中关于网络请求的封装，分为两个部分：

  • axios 的公共配置
  • api 请求的封装

    一、axios 的公共配置

    axios 的公共配置，指的是针对整个项目中所有的 axios 请求的一些公共处理。

    1、创建配置文件

    通常我们会在项目的 uitls 目录中，创建一个 request.js 文件，用来处理所有关于 axios 的公共配置。
    在该文件中引入 axios：
    1. import axios from 'axios';

    2、配置公共路径

    1. // 公共路径
    2. axios.defaults.baseURL = 'http://47.98.128.191:3000';
    该配置生效后，后续所有的 axios 的 url，就不需要再设置公共路径了。

    3、处理后端返回的数据格式

    由于 axios 接收到的后端数据，是整个响应对象。我们真正需要的数据，在响应对象的 data 属性上，因此，我们可以在“响应拦截器”中处理后端返回的数据格式：
    1. // 响应拦截器
    2. axios.interceptors.response.use(res => {
    3.   // 处理后端返回的数据格式，将 res.data 返回给组件
    4.   return res.data;
    5. })
    这样处理后，后续调用 axios 接收后端返回的数据时，就可以直接接收到后端给的结果。

    4、运行公共配置文件

    想要让以上配置生效，需要在 main.js 中引入：
    1. import './utils/request.js';

    二、api 请求的封装

    在任何项目中，都会将项目中所有的网络请求，统一放到同一个目录中来进行管理。

    1、创建目录

    在 src 目录中，创建 api目录用来存放项目中所有的请求文件。同时，在 api 目录中再创建一个 modules目录，用来管理每一个数据模块的相关请求文件。
    1. src
    2. |--- api
    3. |     |--- modules

    2、创建模块文件

    根据项目中的数据类型，在 modules创建不同的 .js 文件。例如学生的请求、班级的请求：
    1. src
    2. |--- api
    3. |     |--- modules
    4. |     |       |--- students.js
    5. |     |       |--- classes.js
    6. |     |       |--- ...

    3、创建汇总文件

    我们还需要将所有请求模块文件，再做一个汇总。
    在 api目录中，创建一个index.js：
    1. src
    2. |--- api
    3. |     |--- index.js
    4. |     |--- modules
    5. |     |       |--- students.js
    6. |     |       |--- classes.js
    7. |     |       |--- ...

    4、封装请求模块

    我们以学生模块为例：
    1. import axios from 'axios';
    2. const students = {
    3.   get(params) {
    4.       return axios({
    5.           url: '/students/getStudents',
    6.           params
    7.       })
    8.   },
    9.   delete() {
    10.   },
    11.   update() {
    12.   },
    13.   add(data) {
    14.       return axios({
    15.           url: '/students/addStudents',
    16.           method: 'POST',
    17.           data
    18.       })
    19.   },
    20.   // ...
    21. }
    22. export default students;

    5、汇总请求

    1. import students from './modules/students.js';
    2. import classes from './modules/classes.js'
    3. const api = {
    4.   students, classes
    5. }
    6. export default api;

    6、全局挂载 api

    在 main.js 中引入 api/index.js 文件，将 api 对象挂载到 Vue 实例上：
    1. import api from './api/index.js'
    2. Vue.prototype.$api = api;
    将 api 对象挂载到 Vue 实例身上，后续在所有组件中都可以通过 this.$api获取到 api 对象。

    7、组件调用 api

    以获取学生数据为例：
    1. export default {
    2.   data() {
    3.       return {
    4.           studentsData: []
    5.       }
    6.   },
    7.   created() {
    8.       this.getStudents();
    9.   },
    10.   methods: {
    11.       async getStudents() {
    12.           const res = await this.$api.students.get();
    13.           this.studentsData = res.data.rows;
    14.       }
    15.   }
    16. }