首页mockjs拦截ajax请求导致blob

mockjs拦截ajax请求导致blob

时间: 2025-04-25 09:25:06 AIGC 浏览: 36

### 使用 Mock.js 拦截 AJAX 请求并处理 Blob 响应为了实现对 `Blob` 类型响应的拦截与模拟，在使用 Mock.js 时需特别注意配置返回的数据格式以及确保该数据能够被正确解析为二进制大对象 (Blob)[^2]。当定义一个用于生成模拟数据的方法时，可以通过指定自定义属性来控制返回的内容类型。对于需要返回文件或其他二进制流的情况，则应该设置合适的 MIME 类型，并通过 JavaScript 的 `new Blob()` 构造函数创建相应的实例作为响应体的一部分[^4]。下面展示了一个具体的例子： ```javascript // 设置 mock 数据规则 Mock.mock('/api/blob-response', { 'content-type': 'application/pdf', 'data': new Blob(['%PDF-1.7...'], {type: "application/pdf"}) }); // 发送请求测试 $.ajax({ url: '/api/blob-response', method: 'GET', xhrFields: { responseType: 'blob' }, success: function(response){ const fileUrl = URL.createObjectURL(response); console.log(fileUrl); // 可以打开这个链接查看 PDF 文件 } }); ``` 此代码片段展示了如何利用 Mock.js 来伪造一个返回 PDF 文档的 API 接口。这里的关键在于将 `'data'` 字段设为一个新的 `Blob` 对象，并指定了其 MIME 类型为 `"application/pdf"`。同时，在发起 AJAX 请求的时候设置了 `xhrFields.responseType='blob'` 参数，使得接收到的数据能按照预期的方式被解释成二进制形式。

阅读全文