mock axios vue的資料傳遞關係
阿新 • • 發佈:2022-03-25
最近有一個專案要快速出一個前端demo,選擇了vue-element框架(雖然其實很想用react,但是為了求快)
本人的基礎只有初級的html/css/js知識,和python後端的一些簡單工作,和萌新沒什麼區別。
本文記錄了一些開發過程中的體會。
mock axios vue的資料傳遞關係
vue的模板和資料繫結
// vue的 <template></template> 需要資料渲染 // 資料來自 vue的 <script> export default { data() { return { xxData:[] //資料來自這個data,可以直接寫,但一般是取後端的資料來填充 } } } </script>
在沒有後端資料的情況下,先用Mock來模擬後端資料
my_get_data()裡的res結構,和[後面的自定義函式](# 以下是getStatisticalData函式,根據需求可以完全自定義)對應
// 資料來自 vue的 <script> // 自定義的一個get_data函式,用來繫結到vue的鉤子函式 import {my_get_data} from 'xxx.js' export default { data() { return { xxData:[] //資料來自這個data,可以直接寫,但一般是取後端的資料來填充 } } } mounted() { // vue的鉤子函式,模板渲染好之後,掛在到某個DOM物件後呼叫。 和它類似的鉤子函式還有 created() my_get_data().then(res =>? { // 獲取返回的資料(詳見) const {code, data} = res.data if (code }) } </script>
獲取渲染需要的資料
vue程式碼中,自定義的get_data函式,一般來自 axios對某個URL地址的請求進行監聽捕獲
首先對axios進行二次封裝,得到一個能快速得到axios request例項的類
(HttpRequest(baseUrl).request()可以得到新增好攔截器,配置好url地址的axios例項)
//該檔案為 my_axios.js import axios from 'axios' // 標準axios import config from '../config' //自定義的config檔案,用來配置URL地址 // 對axios 進行二次封裝, 將配置檔案與axios進行結合。可以通過配置檔案的改變來修改axios請求地址 // 根據配置檔案config.js 來獲取baseUrl const baseUrl = process.env.Node_ENV === 'development' ? config.baseUrl.dev : config.baseUrl.pro // 用於配置axios的url地址,並自動增加攔截器 class HttpRequest { // 初始化時,讀取config檔案中的baseurl constructor(baseUrl) { this.baseUrl = baseUrl } // 獲取已儲存的baseurl(來自config檔案) getInsideConfig() { const config = { baseUrl: this.baseUrl, header: {} } return config } // 攔截器, 傳入axios的例項(axios官方示例程式碼) interceptor(instance) { // 新增請求攔截器 instance.interceptors.request.use(function (config) { // 在傳送請求之前做些什麼 return config; }, function (error) { // 對請求錯誤做些什麼 return Promise.reject(error); }); // 新增響應攔截器 instance.interceptors.response.use(function (response) { // 對響應資料做點什麼 return response; }, function (error) { // 對響應錯誤做點什麼 return Promise.reject(error); }); } // 封裝請求 request(options) { // 建立axios的例項 const instance = axios.create() // 通過getInsideConfig(),獲取已儲存的config中的url options = { ...this.getInsideConfig(), ...options } // 為axios例項新增請求和響應攔截器 this.interceptor(instance) // 得到新增好攔截器,配置好url地址的axios例項 return instance(options) } } // HttpRequest(baseUrl).request()可以得到新增好攔截器,配置好url地址的axios例項 export default new HttpRequest(baseUrl)
以下是my_get_data的實現,是一個配置了具體url的axios例項。
這樣,my_get_data()就能捕獲來自url=/home/getData的請求結果了
import my_axios from './my_axios.js'
export const my_get_data = () => {
return my_axios.request({
url: '/home/getData' // axios對這個URL地址進行監聽捕獲
})
}
通過Mock模擬後端資料,作為 請求的結果,以/home/getData為例
可以通過Mock模擬,也可以直接利用後端資料,提供/home/getData 這個請求地址的結果
通過Mock模擬
import Mock from 'mockjs'
import homeApi from './mockServerData/home'
// 新建一個mock,用於攔截/home/getData的請求
// 一旦有請求到這個地址,會返回getStatisticalData這個函式的內容
Mock.mock('/home/getData', homeApi.getStatisticalData)
以下是getStatisticalData函式,根據需求可以完全自定義
export default {
getStatisticalData: () => {
return {
code: 20000, //模擬的狀態碼
data:{
data1: [0, 1, 2],
data2: []
}
}
}
}
直接獲取後端資料**
略
附:
學習視訊(包括程式碼框架)來自 https://www.bilibili.com/video/BV1QU4y1E7qo?p=22
老師講的內容比較符合我的專案,但是比較細的內容沒有涉及(也許因為太基礎了)