mock axios vue的資料傳遞關係

坦先生的AI資料室發表於2022-03-25
MockiOSVue

最近有一個專案要快速出一個前端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
老師講的內容比較符合我的專案，但是比較細的內容沒有涉及（也許因為太基礎了）

相關文章