前端向服务器发送请求，使用的方法有很多：
XMLHttpRequest、fetch、JQ、axios
1、axios二次封装
二次封装axios是为了请求拦截器、响应拦截器。
请求拦截器：可以在发送请求之前可以处理一些业务；
响应拦截器：当服务器数据返回以后，可以处理一些事情。
安装axios
npm install --save axios
习惯与src的api下放置请求文件
在request.js文件下对axios进行二次封装
// 对于axios进行二次封装import axios from "axios";// 1:利用axios对象的方法create,去创建一个axios实例// 2:request就是axios,只不过稍微配置一下const requests = axios.create({// 配置对象// 基础路由，发请求的时候，路径当中会出现apibaseURL: "/api",// 代表请求超时的时间5Stimeout: 5000,});//请求拦截器：在发请求之前，请求拦截器可以检测到，可以在请求发出去之前做一些事情requests.interceptors.request.use((config) => {// config: 配置对象，对象里面有一个属性很重要，headers请求头return config;});//响应拦截器requests.interceptors.response.use((res) => {// 成功的回调函数：服务器相应数据回来以后，响应拦截器可以检测到，可以做一些事情return res.data;}, (error) => {// 响应失败的回调函数// return Promise.reject(new Error('fail'));nprogress.done();});// 对外暴露export default requests;
2、接口统一管理
在src文件夹下index.js文件中
// 当前这个模块：API进行统一管理import requests from "@/api/request";// 三级联动接口// api/product/getBaseCategoryList get 无参数// 发请求：axios发请求返回结果Promise对象export const reqCategoryList = () => requests({url: '/product/getBaseCategoryList', method: 'get'})
详情查询文档：axios中文网|axios API 中文文档 | axios
跨域问题
什么是跨域：协议、域名、端口号不同请求，称之为跨域
http://localhost:8080/#/home ---- 前端项目本地服务器
http://39.98.123.211 ----后台服务器
解决可以使用：JSONP、CROS、代理。
下面是使用代理解决。
DevServer | webpack 中文文档
没有webpack.config.js文件暴露，在项目的根目录下新建vue.config.js配置文件也是一样。
proxy设置中间代理，可以帮我们向服务器发起请求。跨域问题是由浏览器的原因引起。
'/api'：就是识别发起的请求target：就是要获取服务器的API地址
module.exports = {// 关闭eslintlintOnSave: false,// 代理跨域devServer: {proxy: {'/api': {target: 'http://39.98.123.211',}}}}
注意：修改配置文件需要重启项目
如果觉得《axios二次封装以及API接口统一管理》对你有帮助，请点赞、收藏，并留下你的观点哦！
