本文关于什么是 Mock ？mock基本使用方法详解。

Mock 是一种用于软件开发中的测试技术，可以在实际代码尚未实现时，模拟出一个假的功能实现，以便进行测试和调试。

在软件开发中，Mock 指创建一个对象来模拟真实对象。为什么不用真实对象，需要模拟呢？因为有些真实对象是不容易构造或获取的。比如：

1. 真实 API 仍在开发中，但前端开发依赖该 API。这时，我们可以使用 Mock 来模拟 API 的返回结果。

2. 在开发环境，无法访问依赖的第三方服务。这时，我们可以使用 Mock 来模拟第三方服务的返回结果。

为什么使用 Mock

使用 Mock，有利于提升软件质量和开发效率。

有利于提升软件质量

开发高质量的软件，我们要做功能测试。功能测试不仅要关注软件的正常使用，还需要关注各种异常情况。异常情况不容易稳定复现，需要 Mock。常见的异常情况有：网络不稳定，网络超时，数据库连接超时，服务器出故障，API 返回异常。

开发高质量的软件，我们要做性能测试。我们通过 Mock 高并发、大数据量等场景来了解软件的性能表现。

开发高质量的软件，我们也要做安全测试。在安全测试中，我们主要关注软件的漏洞和弱点。我们通过 Mock 各种攻击和漏洞利用场景，来检测软件的安全性。

有利于提升软件的开发效率

通过 Mock 外部依赖，可以不用等外部依赖的完成，从而节约时间。常见的场景是：前端开发在 API 接口还没好时，用 Mock 的 API。

通过 Mock 前置条件，可以减少构造真实前置条件的时间。比如：表单一共有三步，每一步都依赖上一步填的表单数据。目前在开发第三步，通过 Mock 前两步填的数据，就不需要每次手动填前两步的数据了。

使用 Mock 的具体场景

从上文中，我们知道使用 Mock 的范围很广。为了避免内容太拖沓，我这边以 Mock API 接口为例，介绍几个具体场景：

1. API 仍在开发中，但我们需要在此之上进行测试，这时我们可以使用 Mock 来模拟 API 的返回结果。

2. 当某个 API 的调用次数受到限制时，我们可以使用 Mock 来模拟 API 的行为，以便我们在测试中可以调用 API 的无限次数。

3. 当某个 API 返回的数据结构非常复杂时，我们可以使用 Mock 来生成假数据，以便测试我们的代码是否能正确处理 API 返回的数据。

4. 当某个 API 的行为受到外部因素的影响时，例如网络不稳定、服务器出现故障等，我们可以使用 Mock 来模拟这些情况，以便我们的代码可以正确处理这些异常情况。

如何使用 Mock

使用 Mock，需要写一些代码。比如：要 Mock API 接口，就需要拦截 API 请求，替换真实的 API 为 Mock 的 API。核心代码如下：

 // 存储真实的xhr构造器。在不需要 Mock 时，可恢复。
window.realXhr = window.realXhr || XMLHttpRequest
// 重写XMLHttpRequest构造函数
window.XMLHttpRequest = function () {
  var xhr = new window.realXhr()
  this.xhr = xhr
  for (var attr in xhr) {
    if (xhr[attr] instanceof Function) { // 接管xhr function
                        // interceptFn 实现 Mock 的逻辑
      this[attr] = interceptFn(attr, config)
    } else {
      Object.defineProperty(this, attr, { // 接管xhr attr、event
        get: getterFactory(attr, config),
        set: setterFactory(attr, config),
        enumerable: true
      })
    }
  }
}

使用工具，能让 Mock 变得容易。

mock基本使用

npm i mockjs -D

import Mock from 'mockjs'Mock.mock(" /api/feed",{json数据})

import '../mock/index.js'

mock(data)mock(url,data)mock(url,type,data)mock(url,type,function)data：数据url：拦截地址(可以是正则)type：拦截请求类型(post,get,put,delete),默认get请求function：通过函数返回数据,参数用config 请求的配置

"id":"@id""star|1-2":"⭐"  字符串重复1-2次"price|100-200.2-3”小数点2-3位
"data | 10"";[{name:"名称")]数组的内容重复10遍"live | 1":true,随机返回true,false"tel":/13\d{9}/  手机号码"des":function(){ return this.start+this.price}"name":"@cname" 表示中文名称"address":"@country(true)" 地址"description":"@cparagraph(1，3）”随机段落2-3行
"pic":@datalmage(200x100）;图示"

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。