标签：axios return data baseUrl vue config mock
最近有一个项目要快速出一个前端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
老师讲的内容比较符合我的项目，但是比较细的内容没有涉及（也许因为太基础了）
标签：axios,return,data,baseUrl,vue,config,mock 来源： https://www.cnblogs.com/yushengchn/p/16054043.html
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。