vue-element-template 如何使用官方request.js请求
许多新手在使用VUE-element-template这个模板，给后台发送数据的时候，一般使用Axios请求，但是发现使用多了，并不好用，而且容易造成代码冗余，也不方便日后项目的URL地址统一管理。查询官方文档中发现里面有request.js这个文件
request.js介绍
其中，@/utils/request.js 是基于 axios 的封装，便于统一处理 POST，GET 等请求参数，请求头，以及错误提示信息等。具体可以参看 request.js。 它封装了全局 request拦截器、response拦截器、统一的错误处理、统一做了超时处理、baseURL设置等。
- 官方推荐做法
在 vue-element-admin 中，一个完整的前端 UI 交互到服务端处理流程是这样的：
- UI 组件交互操作；
- 调用统一管理的 api service 请求函数；
- 使用封装的 request.js 发送请求；
- 获取服务端返回；
- 更新 data；
具体改造流程
第一步：改造config文件
改造config文件夹下的文件，里面有
- /dev.env.js 生产环境
- /prod.env.js 上线环境
用到那个该哪个文件，这里以dev.env.js 文件为例，修改BASE_API 值 改为自己的后台接口地址
image.png
第二步：改造request文件
该文件位于 src/utils/
修改里面的res.code 值为自己后台返回的状态码，这里以修改为 200 为例！
这个文件不修改就算发送请求成功也不会相应数据，本质做了拦截请求。
image.png
第三步：编写api接口文件
该文件位于 src/api/
以后所有的api请求接口，都可以放在这么目录下，进行统一管理，方便后期维护
下面编写fetchList请求方法为例，参数可以带也可以不带，看实际开发需求
image.png
第四步：使用自定义API请求方法
首先在开头需要引入上一步编写的文件，然后在方法里面进行请求获取数据
image.png
到此基本结束对vue-element-template的项目使用官方请求改造
<hr style=" border:solid; width:100px; height:1px;" color=#999AAA size=1">
以下是你可能出现的问题：
- 改造完成之后登录页面一直登入异常
这是由于你的项目登录页面并没有实现自己的登录接口，不更换默认使用官方的mock假数据
★ 解决办法如下：
直接修改官方mock/user.js 里面的返回状态值为自己定义的状态码
image.png
