axios-mock-adapter使用

axios-mock-adapter 是一个用于模拟 axios HTTP 请求的库。它允许你在测试或开发过程中，为 axios 实例提供模拟的响应，以便在没有实际后端服务的情况下进行前端功能的开发和测试。

1. 安装 axios-mock-adapter

首先，你需要安装 axios-mock-adapter。你可以使用 npm 或 yarn 来安装它：

注意：安装到开发环境！不要直接默认安装到

npm install axios-mock-adapter --save-dev  
# 或者  
yarn add axios-mock-adapter --dev

2. 引入所需的库

在你的测试文件或需要模拟请求的文件中，引入 axios 和 axios-mock-adapter：

import axios from 'axios';  
import MockAdapter from 'axios-mock-adapter';

3. 创建一个模拟适配器实例

接下来，你需要创建一个 MockAdapter 实例，并将其与你的 axios 实例关联起来：

// 创建axios实例
const service = axios.create({
  // axios中请求配置有baseURL选项，表示请求URL公共部分
  baseURL: import.meta.env.VITE_APP_BASE_API,
  // 超时
  timeout: 10000
})

// 创建一个 MockAdapter 实例，并将其与你的 axios 实例关联起来
const mock = new MockAdapter(service);

4. 定义模拟响应

使用 mock 实例的 onGet、onPost、onPut、onDelete 等方法来定义针对不同 HTTP 方法的模拟响应：

mock.onGet('/api/users').reply(200, {  
  users: [  
    { id: 1, name: 'John Doe' },  
    { id: 2, name: 'Jane Doe' }  
  ]  
});  
  
mock.onPost('/api/users').reply(function (config) {  
  // 你可以访问请求的 config 对象，包括请求头和请求体  
  const { data } = config;  
  return [201, { id: data.id, name: data.name }]; // 返回状态码和响应数据  
});

建议使用单独一个mock文件夹，导入的形式来引入

// mock.js
export const MockGets = {
    '/captchaImage': {
        "msg": "操作成功",
        "code": 200,
        "captchaEnabled": true,
        "uuid": "352f4bb7088d435dad641c34aad337c4"
    }
}

// service.js
Object.keys(MockGets).forEach(function(key) {
  mock.onGet(key).reply(200, MockGets[key]);
  console.log(key + ": " + MockGets[key]);
});

5. 在你的代码中使用 axios

axios.get('/api/users')  
  .then(response => {  
    console.log(response.data); // 输出模拟的用户列表  
  })  
  .catch(error => {  
    console.error(error);  
  });

6. 在测试或开发完成后清理模拟

当你完成测试或开发，并希望使用真实的后端服务时，你需要确保移除或禁用所有的模拟。这通常是通过销毁 MockAdapter 实例或移除模拟定义来完成的。

mock.restore(); // 恢复所有模拟，使得 axios 请求将再次发往实际服务器