vue-element-template 如何使用官方request.js請(qǐng)求
許多新手在使用VUE-element-template這個(gè)模板，給后臺(tái)發(fā)送數(shù)據(jù)的時(shí)候，一般使用Axios請(qǐng)求，但是發(fā)現(xiàn)使用多了，并不好用，而且容易造成代碼冗余，也不方便日后項(xiàng)目的URL地址統(tǒng)一管理。查詢官方文檔中發(fā)現(xiàn)里面有request.js這個(gè)文件
request.js介紹
其中，@/utils/request.js 是基于 axios 的封裝，便于統(tǒng)一處理 POST，GET 等請(qǐng)求參數(shù)，請(qǐng)求頭，以及錯(cuò)誤提示信息等。具體可以參看 request.js。 它封裝了全局 request攔截器、response攔截器、統(tǒng)一的錯(cuò)誤處理、統(tǒng)一做了超時(shí)處理、baseURL設(shè)置等。
- 官方推薦做法
在 vue-element-admin 中，一個(gè)完整的前端 UI 交互到服務(wù)端處理流程是這樣的：
- UI 組件交互操作；
- 調(diào)用統(tǒng)一管理的 api service 請(qǐng)求函數(shù)；
- 使用封裝的 request.js 發(fā)送請(qǐng)求；
- 獲取服務(wù)端返回；
- 更新 data；
具體改造流程
第一步：改造config文件
改造config文件夾下的文件，里面有
- /dev.env.js 生產(chǎn)環(huán)境
- /prod.env.js 上線環(huán)境
用到那個(gè)該哪個(gè)文件，這里以dev.env.js 文件為例，修改BASE_API 值 改為自己的后臺(tái)接口地址
第二步：改造request文件
該文件位于 src/utils/
修改里面的res.code 值為自己后臺(tái)返回的狀態(tài)碼，這里以修改為 200 為例！
這個(gè)文件不修改就算發(fā)送請(qǐng)求成功也不會(huì)相應(yīng)數(shù)據(jù)，本質(zhì)做了攔截請(qǐng)求。
image.png
第三步：編寫api接口文件
該文件位于 src/api/
以后所有的api請(qǐng)求接口，都可以放在這么目錄下，進(jìn)行統(tǒng)一管理，方便后期維護(hù)
下面編寫fetchList請(qǐng)求方法為例，參數(shù)可以帶也可以不帶，看實(shí)際開發(fā)需求
第四步：使用自定義API請(qǐng)求方法
首先在開頭需要引入上一步編寫的文件，然后在方法里面進(jìn)行請(qǐng)求獲取數(shù)據(jù)
到此基本結(jié)束對(duì)vue-element-template的項(xiàng)目使用官方請(qǐng)求改造
<hr style=" border:solid; width:100px; height:1px;" color=#999AAA size=1">
以下是你可能出現(xiàn)的問題：
- 改造完成之后登錄頁面一直登入異常
這是由于你的項(xiàng)目登錄頁面并沒有實(shí)現(xiàn)自己的登錄接口，不更換默認(rèn)使用官方的mock假數(shù)據(jù)
★ 解決辦法如下：
直接修改官方mock/user.js 里面的返回狀態(tài)值為自己定義的狀態(tài)碼
image.png
