axios调取本地mock模拟数据详细讲解

需要与后台进行数据交互  这里使用本地json数据来模仿后台数据交互流程 我们使用了mock数据模拟后台数据)

作为前端经常需要模拟后台数据,我们称之为mock。mock 的真正意义在于简化测试环境。假如你现在要测试一个dao,但是你有不想构建数据库环境就可以用mock模拟数据库的返回结果。


进入正题:

一,在vuejs 2.0版本 在配置文件webpack.dev.conf.js进行本地数据访问,在const portfinder = require(‘portfinder’)后添加


//app.use是express“调用中间件的方法”。所谓“中间件(middleware),就是处理HTTP请求的函数,用来完成各种特定的任务,比如检查用户是否登录、分析数据、以及其他在需要最终将数据发送给用户之前完成的任务。”。这是阮一峰文章的原话。
//简而言之,app.use() 里面使用的参数,主要是函数。但这个使用,并不是函数调用,而是使能的意思。当用户在浏览器发出请求的时候,这部分函数才会启用,进行过滤、处理。

 

二,devServer,在里面添加

### 如何在 Axios 中封装 Mock 模拟数据 #### 创建 Mock 数据文件 为了实现模拟后端数据的功能,在项目根目录下创建 `mock` 文件夹,并在其内部建立 `index.js` 文件用于编写模拟逻辑。此操作确保当发起特定 API 请求时,能够返回预先设定好的响应内容而不是真实服务器的数据[^1]。 ```javascript // mock/index.js import Mock from 'mockjs' const Random = Mock.Random; Mock.mock('/api/users', { "users|10": [{ id: '@increment', name: '@cname()' }] }); ``` 上述代码片段展示了如何利用 `Mock.js` 库生成一组包含十个用户的 JSON 数组作为 `/api/users` 接口的假数据源。 #### 整合 AxiosMock.js 接下来需要调整项目的配置以便让 Axios 实例知晓存在这些模拟规则。通常情况下是在项目的入口文件 `main.js` 或者专门用来初始化 HTTP 客户端的地方完成这一步骤[^3]。 ```javascript // main.js or http-client setup file import axios from 'axios'; import './mock'; // 加载 mock 配置 Vue.prototype.$axios = axios; ``` 通过这种方式不仅实现了全局范围内访问 `$axios` 方法的能力,同时也激活了之前定义的所有模拟行为。 #### 自定义 Axios 实例 对于更复杂的场景可能还需要进一步定制 Axios 的默认选项或是添加额外功能如请求/响应拦截器等。可以考虑构建一个新的函数来负责创建带有指定属性的对象实例[^2]。 ```javascript // utils/httpClient.js import axios from 'axios'; function createAxiosInstance(baseURL) { const instance = axios.create({ baseURL, timeout: 5000 }); // Add request interceptor instance.interceptors.request.use(config => config); // Add response interceptor instance.interceptors.response.use(response => response.data); return instance; } export default createAxiosInstance; ``` 最后可以在应用的不同部分根据需求调用这个工厂方法获得具有不同基础 URL 设置或其他特性的 Axios 实例: ```javascript // service/userService.js import createAxiosInstance from '@/utils/httpClient'; const userService = createAxiosInstance('http://localhost:8080/api'); async function fetchUsers() { try { let result = await userService.get('/users'); console.log(result); } catch (error) { console.error(error.message); } } ``` 这样就完成了基于 Axios 并结合 Mock 技术的一套完整的前端开发工具链设置过程。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

积码成猿

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值