Mock.js拦截带参数的get请求问题

最新推荐文章于 2024-05-13 17:31:43 发布
最新推荐文章于 2024-05-13 17:31:43 发布
阅读量9.8k 收藏 3
点赞数 2
分类专栏： 前端 文章标签： Mock拦截get请求出现异常
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43201015/article/details/84112702
版权

描述：

mock模拟数据，拦截/web-service/goods/ + params请求（拦截带参数的get请求）
在这里插入图片描述

页面错误提示

404
在这里插入图片描述
注意:还有可能报跨域异常

解决办法

将 /web-service/goods/ + params修改成正则表达式的方式/\/goods\/\d+/
在这里插入图片描述

Do Re Mi
关注
  • 2
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
uniapp中使用mock数据及返回404的常见原因
Sylvasylva的博客
11-02 4346
uniapp中使用mock及mock请求404常见问题
【Mock|JS】Mock的get传参+获取参数信息
此人太懒，没有任何简介
03-21 974
MOck
Mockjs POST和GET不同参数返回不同结果的解决办法
黄彪博客
08-27 4917
文章目录文章参考问题描述Mock 关键API介绍说明API 介绍参数说明案例POST 请求，相同的URL不同的参数GET 请求，相同的URL不同的参数Restful 请求，不同的URL不同的参数 文章参考 Mock.mock() 方法介绍 Mockjs如何拦截带参数的GET请求 问题描述 在工作中想使用POST请求方式获取数据字典的数据，由于不同的数据字典需要传递不同的参数，但是接口是同一个，这样就尴尬了，因为URL是固定的，那么怎么区分不同的参数呢？ Mock 关键API介绍说明 API 介绍 Mo
axios拦截请求，mock返回模拟数据
最新发布
weixin_43844730的博客
05-13 347
开发项目中，还没有后端接口时，可以使用axios的请求拦截器和响应拦截器，在请求发送到服务器之前或响应返回到客户端之前进行干预。拦截后使用mockjs模拟后端接口，自己可以定义一些返回数据，实现数据的交互。
vue报错解决：mock.js请求数据报错404
小张与BUG
09-27 1万+
mock.js请求数据报错404
Mockjs如何拦截带参数的GET请求
热门推荐
dadiyang的博客
09-23 3万+
之前写了一篇文章 如何在Vue项目中使用Mockjs，模拟接口返回的数据，实现前后端分离独立开发 阅读量还算挺高的，看来 Mockjs 是非常受欢迎的。 在实践过程中，发现 Mockjs 本身对 GET 请求的支持并不是很友好。 举个例子，使用 Mock.mock("/user/getUserInfo", "get", mockData) 的时候，它只会拦截url等于 /user/getUserI...
Node.js服务器环境下使用Mock.js拦截AJAX请求的教程
10-22
例如，要拦截一个GET请求，并返回之前生成的模拟数据，你可以这样做： ```javascript Mock.mock('/api/data', 'get', data); ``` 从Mock.js 1.0版本开始，它不再依赖于特定的Ajax库，而是直接模拟XMLHttpRequest对象...
vue+mock.js实现前后端分离
10-16
在这个例子中，`created` 生命周期钩子中使用Mock.js 模拟了 '/GetAll' URL 的数据，当Vue组件初始化并发起GET请求时，Mock.js 会自动拦截并返回预定义的模拟数据。 **规范化Mock.js 使用** 为了提高代码的可维护...
Vue+Mock.js模拟登录和表格的增删改查功能
10-18
这样，当你在Vue应用中调用登录接口时，Mock.js会拦截请求并返回由`loginByUsername`生成的响应数据。 接下来，我们转向表格的增删改查功能。对于表格的数据，你可以定义一系列Mock.js模板来生成假数据。例如，创建...
mock.js模拟前后台交互
12-10
现在，当使用 axios 发送请求到 `/api/mock` 时，Mock.js 会返回我们在 `mock.js` 中定义的模拟数据。 ### 使用 Mock.js 的好处 1. **快速开发**：在后端接口未完成或联调阶段，前端可以先使用模拟数据进行界面和...
Vue+mock.js+axios
11-08
1. **列表页渲染**：当页面加载时，Vue应用会发起一个axios GET请求，获取列表数据。这些数据通常包括多个项目的标题、简介等。Mock.js在此时提供模拟数据，确保即使没有实际后端也能显示数据。 2. **点击事件**：...
Mock.js拦截带参数的get请求
南京小龙虾的博客
01-08 2872
用Mock.js模拟拦截前端的请求，发现对于post请求能正常拦截，但是对于get请求无法拦截到，网上百度了一下，发现是由于get请求传递了参数拼接在了url后面，而Mock.js只能拦截到不带参数的url,比如 // 只能拦截到/api/materialList Mock.mock('/api/materialList', 'get', { 'status': '1', 'errco...
Mock服务（2）---- get请求
分享自己浅浅的知识
01-22 1328
一、mock一个get请求 [ { "description": "get请求不带参数", //一个不带参数的get请求 "request": { "uri": "/noParams", //访问的地址 "method": "get" //请求方式 }, "response": { "text": "这个请求不带参数" } }, { "description": "get请求带参数", //一个带参数的get请求 "r
Vue中结合MockJS实现接口的拦截和数据的获取
小火车况且况且况且的博客
06-11 1696
Vue中结合MockJS实现接口的拦截和数据的获取 1. 首先引入MockJS 1.1 目录结构 mock主要是存放mock index.js处理主要的逻辑// 引入 mock import Mock from "mockjs" import user from "./modules/user" const getBaseURL = 'http://localhost:9527/mock' Mock.setup({ timeout: 800 // 设置延迟响应，模拟向后端请求数据 }) Moc
关于mockjs中如何拿到传过来的数据问题。
weixin_43080554的博客
08-15 5989
在mockjs中Mock.mock()的方法会接受三个参数第一个参数是所拦截的接口，第二个参数是所拦截的的请求方式，第三个参数是一个回调函数回调函数的传参是本次请求的选项集 官方文档是这样给出的，所以我们拿到其中的body就是接口传过来的数据了。 ...
Mock.JS拦截HTTP请求的问题
ZHANG DING的博客
03-05 1万+
Mock.JS拦截HTTP请求的问题 MockJS是一种比较通用的前端模拟HTTP请求及回复的工具，能够仿真处各类HTTP的请求及返回结果。实现在无后端的情况下，前端对于后端接口的仿真。Mock的基础使用也是比较简单：Mock.JS官网 但，在引入MockJS时， import Mock from 'mockjs' 会拦截所有前端发出的HTTP请求，无论是否使用Mock.mock开启Moc...
Mockito 中捕获 mock 对象方法的调用参数
一叶不知秋
02-26 1万+
Mockito 可以帮助我们创建 Mock 对象，mock 被调用的方法，断言调用次数，在方法参数不易确定的情况下还能帮我们捕获参数。下面是我们第一个问题: 为什么要捕获调用参数 在被 mocker 方法调用参数明确的情况下可无需捕获参数，例如，下面的情景： 01 02 03 04 05 06 07 08 0
以上提到的mock.js拦截器应该写在哪个文件夹中？
09-09
### 回答1： mock.js 的拦截器可以写在任何一个 JS 文件中，只要在使用mock.js的应用程序中引用了这个文件就可以生效。 通常情况下，mock.js 的拦截器会被放置在一个单独的 Mock 数据文件中，这个文件可以被放置在项目的任何地方。在一个基于 Node.js 的应用程序中，可以将这个文件放置在项目的根目录下，然后使用 Node.js 的 require() 方法引用这个文件。 例如，在 Node.js 的 Express 框架中，可以在应用程序的入口文件（通常是 app.js 或 index.js）中引用 Mock 数据文件： ``` const app = require('express')(); const mock = require('./mock'); // 引用 Mock 数据文件 // 其他应用程序代码 ``` 在这个例子中，假设项目根目录下有一个名为 mock.js 的文件，它包含了所有的 mock 数据和拦截器定义。使用 require('./mock') 的方式引用这个文件，可以使得这些拦截器生效并拦截请求。 ### 回答2： mock.js拦截器的写法和放置位置主要根据项目的具体情况而定。一般来说，我们可以将mock.js拦截器放在项目的根目录下的一个特定文件夹中，例如`mock`文件夹。 在项目的根目录下创建一个`mock`文件夹，并在该文件夹中创建`mock.js`文件。在`mock.js`文件中，我们可以使用mock.js提供的拦截器功能来拦截请求和返回模拟数据。 拦截器的写法可以根据项目需求来定义，可以设置指定的URL路径，也可以设置请求的类型（GET、POST等），以及对请求进行拦截后返回的模拟数据。 在项目开发中，一般会将拦截器和请求分离开来，拦截器只负责拦截请求并返回模拟数据，而实际的请求则通过真实的后端接口来处理。 最后，在项目启动时，需要引入`mock.js`文件，并调用相应的函数启动mock.js拦截器。这样，当应用发起请求时，mock.js拦截器会拦截匹配的请求并返回模拟数据，方便开发和测试过程中的接口调用。 总之，mock.js拦截器可以根据项目需求放置在项目的根目录下的一个特定文件夹中，例如`mock`文件夹，方便统一管理和调用。 ### 回答3： mock.js拦截器通常应该放置在项目的根目录下的一个独立的文件夹中，可以称之为"mock"文件夹。这样做的好处是能够很方便地定位到mock数据文件，避免与其他代码混在一起导致混乱。 在"mock"文件夹内，可以按照不同的功能或模块划分子文件夹，使得mock数据的组织更加清晰和易于维护。例如，可以在"mock"文件夹下创建一个名为"api"的子文件夹来存放与后端API接口相关的mock数据。在该子文件夹内，可以创建各个API接口对应的mock数据文件，以保持代码的整洁性和可读性。 在使用mock.js拦截器时，通常会在项目的入口文件（如main.js或index.js）中引入mock拦截器的相关配置文件。这样可以确保在应用程序启动时就会加载mock拦截器并拦截对应的API请求，从而实现数据模拟和调试功能。 总之，将mock.js拦截器放置在项目的根目录下的"mock"文件夹中，会使项目结构更加清晰，便于团队协作和维护，并且能够更好地对mock数据进行组织和管理。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值