vue-element-template 如何使用官方request.js请求

文章目录 vue-element-template 如何使用官方request.js请求request.js介绍具体改造流程第一步：改造config文件第二步：改造request文件第三步：编写api接口文件第四步：使用自定义API请求方法

---

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 值 改为自己的后台接口地址

第二步：改造request文件

该文件位于 src/utils/
修改里面的res.code 值为自己后台返回的状态码，这里以修改为 200 为例！
这个文件不修改就算发送请求成功也不会相应数据，本质做了拦截请求。

第三步：编写api接口文件

该文件位于 src/api/
以后所有的api请求接口，都可以放在这么目录下，进行统一管理，方便后期维护
下面编写fetchList请求方法为例，参数可以带也可以不带，看实际开发需求

第四步：使用自定义API请求方法

首先在开头需要引入上一步编写的文件，然后在方法里面进行请求获取数据

到此基本结束对vue-element-template的项目使用官方请求改造

---

以下是你可能出现的问题：

改造完成之后登录页面一直登入异常
这是由于你的项目登录页面并没有实现自己的登录接口，不更换默认使用官方的mock假数据
★ 解决办法如下：
直接修改官方mock/user.js 里面的返回状态值为自己定义的状态码