mock axios vue的数据传递关系

Z时代
2024-01-10
分类：综合

vue

最近有一个项目要快速出一个前端demo，选择了vue-element框架（虽然其实很想用react，但是为了求快）

本人的基础只有初级的html/css/js知识，和python后端的一些简单工作，和萌新没什么区别。

本文记录了一些开发过程中的体会。

axios-vue的数据传递关系">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: []
      }      
    }
  }
}