方法封装
请求封装完成后，还需要对方法进行封装，方便调用：
let base = ''; export const postRequest = (url, params) => { return axios({ method: 'post', url: `${base}${url}`, data: params, headers: { 'Content-Type': 'application/json' } }); } export const putRequest = (url, params) => { return axios({ method: 'put', url: `${base}${url}`, data: params, headers: { 'Content-Type': 'application/json' } }); } export const deleteRequest = (url) => { return axios({ method: 'delete', url: `${base}${url}` }); } export const getRequest = (url) => { return axios({ method: 'get', url: `${base}${url}` }); }
由于在前后端分离项目中，大多数情况下，后端接口都采用 RESTful 风格来设计，所以前端主要封装 GET\POST\PUT\DELETE 方法，然后所有的请求参数都是用 JSON。
这里一开始定义了一个 base 变量，这是请求的前缀，方便后期维护（如果需要统一修改请求前缀）。
制作 Vue 插件
封装好的方法已经可以直接使用了，但是比较麻烦，每次使用时，都需要在相关的 vue 文件中引入方法，像下面这样：
import {postRequest} from "../utils/api";
但是这种操作方式太麻烦，所以我们可以考虑将方法进一步封装成 Vue 的插件，这样在每一个 vue 文件中，不需要引入方法就能够直接调用方法了。
参考 Vue 官方文档 https://cn.vuejs.org/v2/guide/plugins.html，如下：
官方给出了 5 种插件制作方式，我们这里采用第 4 种方案。 具体操作就是在 main.js 中引入所有的封装好的方法，然后挂载到 Vue.prototype 上即可，如下：
import {postRequest} from "./utils/api"; import {putRequest} from "./utils/api"; import {deleteRequest} from "./utils/api"; import {getRequest} from "./utils/api"; Vue.prototype.getRequest = getRequest; Vue.prototype.deleteRequest = deleteRequest; Vue.prototype.putRequest = putRequest; Vue.prototype.postRequest = postRequest;
封装完成后，以后在 vue 文件中，直接通过 this 就可以获取到网络请求方法的引用了，如下：
this.postRequest("/doLogin", this.user).then(msg=>{ if (msg) { //登录成功，页面跳转 } })
注意 ，then 中的 msg 就是响应拦截器中返回的 msg ，这个 msg 如果没有值，表示请求失败（失败已经在拦截器中进行处理了），如果有值，表示请求成功！
配置请求转发
在前后端分离中，前端和后端在不同的端口或者地址上运行，如果前端直接向后端发送请求，这个请求是跨域的。
但是在项目部署时，前端打包编译后拷贝到 Java 项目中，和 Java 项目一起运行，此时不存在跨域问题。
所以这里我们的解决思路不是解决跨域问题，而是通过配置 NodeJS 的请求转发，来实现网络请求顺利发送。
请求转发在 vue 项目的 config/index.js 文件中配置：
添加了请求转发配置之后，一定要重启前端项目才会生效。
此时启动前端项目，就可以顺利发送网络请求了。
总结
本文主要和大伙分享了在前后端分离的情况下，如何对前端网络请求进行封装，并且如何配置请求转发，这是前后端分离中的基础课，小伙伴们有问题欢迎留言讨论。
