Vue项目Axios集成Mock数据

1
2
3

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

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

// src/mock/index.js
import axios from 'axios'
import Mock from "mockjs";
import MockAdapter from 'axios-mock-adapter'
// 创建axios实例
const instance = axios.create();// 这一步很重要
// 创建mock实例
const mock = new MockAdapter(instance)

// 模拟GET请求（固定数据）
mock.onGet('/user').reply(200, {
  id: 1,
  username: 'admin'
})
// 模拟GET请求（随机数据）
mock.onGet('/user').reply(200, Mock.mock({
  id: '@id',
  username: '@name'
}))
// 使用axios请求mock并导出结果
export const getUser = () => {
  return instance.get('/user');
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16

// src/mock/article.js
import axios from 'axios'
import MockAdapter from 'axios-mock-adapter'
// 创建axios实例
const instance = axios.create();// 这一步很重要
// 创建mock实例
const mock = new MockAdapter(instance)
// 模拟GET请求
mock.onGet('/article').reply(200, {
  id: 1,
  title: '文章标题'
})
// 使用axios请求mock并导出结果
export const getArticle = () => {
  return instance.get('/article');
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10

// Use.vue
import { getUser } from '@/mock/index'
import { getArticle } from '@/mock/article'
// 调用mock方法
getUser().then(res => {
  console.log(res.data)
})
getArticle().then(res => {
  console.log(res.data)
})

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17

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

// 创建mock实例
const mock = new MockAdapter(axios)

// 模拟GET请求
// 相应参数包括状态码和返回数据，也可以有Headers
mock.onGet('/user').reply(200, {
  id: 1,
  username: 'admin'
})

// 业务中使用
axios.get('/user').then(res => {
  console.log(res.data)
})

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17

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

// 创建mock实例
const mock = new MockAdapter(axios)
// 模拟POST请求
// 可以添加请求参数：params
// 相应参数包括状态码和返回数据，也可以有Headers
mock.onPost('/user',{params:{name:"admin"}}).reply(200, {
  id: 1,
  username: 'admin'
})

// 业务中使用
axios.post('/user',{name:"admin"}).then(res => {
  console.log(res.data)
})

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55

mock.onGet("/users").reply(function (config) {
  // `config` 是axios配置，包含URL等内容
  // 返回[status，data，header]形式的数组
  return [
    200,
    {
      users: [{ id: 1, name: "John Smith" }],
    },
  ];
});

// 模拟重定向
mock.onPost("/foo").reply(function (config) {
  return axios.get("/bar");
});

// 正则
mock.onGet(/\/users\/\d+/).reply(function (config) {
  // 实际ID可以从config.url中获取
  return [200, {}];
});

// 正则中添加变量
const usersUri = "/users";
const url = new RegExp(`${usersUri}/*`);
mock.onGet(url).reply(200, users);

// 模拟错误
mock.onPost().reply(500);

// 链式
mock.onGet("/users").reply(200, users).onGet("/posts").reply(200, posts);

// replyOnce()
mock..onGet("/users").replyOnce(200, users); //只相应一次后，执行mock.resetHandlers()，删除请求
mock..onGet("/users")..replyOnce(500); //只相应一次后，再次请求就会返回500

// 模拟 GET, POST, PUT, DELETE, PATCH, HEAD, OPTIONS 等任何请求
mock.onAny("/foo").reply(200);

// 允许特定请求，其它返回500
mock.onGet("/foo").reply(200).onAny().reply(500);

// 允许特定st请求，其它直接通过，passThrough()
mock.onGet("/foo").reply(200).onPut("/bar", { xyz: "abc" }).reply(204).onAny().passThrough();

// 未命中的所有请求都添加passThrough()
const mock = new MockAdapter(axios,{ onNoMatch: "passthrough" })
mock.onAny("/foo").reply(200); // 未命中的会直接通过，不会返回500

// 未命中的所有请求都添加异常
const mock = new MockAdapter(axios,{ onNoMatch: "throwException" })

// 模拟请求参数数据
mock.onPut("/product", { id: 4, name: "foo" }).reply(204);

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

// 请求时传递参数
mock.onPost('/user',{params:{name:"admin"}}).reply(200, {
  id: 1,
  username: 'admin'
})

// 全部请求延迟相应
const mock = new MockAdapter(axios, { delayResponse: 2000 })

// 单个延迟响应
mock.onGet('/user').delay(2000).reply(200, {})

// 恢复原始行为
mock.restore()
//reset与restore的不同之处在于restore完全删除了axios实例中的mocking，而reset只删除了所有通过onGet、onPost等添加的mock处理程序，但保留了mocking。
// 重置所有请求
mock.reset()

// 重置已注册的请求
mock.resetHandlers()
// 重置已注册请求和历史
mock.resetHistory()

// 模拟网络错误
mock.onGet('/user').networkError()

// 模拟一次错误
mock.onGet('/user').networkErrorOnce()

// 模拟网络超时
mock.onGet("/users").timeout();

// 模拟一次超时
mock.onGet("/users").timeoutOnce();