Axios Mock 的一种方法

最新推荐文章于 2025-05-14 11:39:36 发布

季秀

最新推荐文章于 2025-05-14 11:39:36 发布

阅读量741

点赞数

文章标签： javascript 前端 html

本文链接：https://blog.youkuaiyun.com/csdn_shmily/article/details/130260386

版权

本文介绍了如何利用axios-mock-adapter在前端开发中进行接口模拟，包括安装、创建适配器和设置模拟对象，以方便快捷地进行接口请求逻辑的测试。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Axios Mock 的一种方法

使用方式
我的使用姿势

前端在写页面逻辑时，后端的接口还没好，又不想等到接口好了再开发，这时候怎么办呢？就需要 Mock 来帮忙了，发同样的请求，返回的数据却可以自己定义，发请求的代码写好了也不用改，多好。

介绍一个工具 axios-mock-adapter 可以实现这个功能

使用方式

以开发依赖的形式安装：

npm install axios-mock-adapter --save-dev

创建适配器

var axios = require("axios");
var MockAdapter = require("axios-mock-adapter");

// 将 axios 实例作为参数传入，MockAdapter 就会改造这个 axios 示例，
// 通过这个 axios 实例发送的请求，将会被引导到自己定义的返回，而不会真正去请求接口
var mock = new MockAdapter(axios);

// 使用 mock 监听 /users 这个 GET 请求，并指定响应的数据
// 走 mock 时，该接口返回 reply 方法中指定的数据
mock.onGet("/users").reply(200, {
   
  users: [{