简单说说前端项目中可用的 API Mocking 策略

布满荆棘的人生 2023-10-13 08:51 2阅读 0赞

在 dev.to 上看到一篇文章[《API Mocking Strategies for JavaScript Applications》][API Mocking Strategies for JavaScript Applications]，介绍前端项目中的 API Mocking 策略，阅读后有些收获，在这里给大家做下简单概述。

### 传统 Mock 的两个可选方向 ###

网页中一个典型的网页请求是这样的：

![c39dd22f20ed4b0788ae3d4f7de4babe.png][]

如果要对我们的项目下手进行 Mock，有两个可选的方向。一个是 Mock Request Client（window.fetch 或 window.XMLHttpRequest），一个是 Mock 服务器。

#### Mock Request Client ####

对 Mock Request Client 而言，其原理比较简单，类似下面这样：

window.fetch = (init, input) => {
      // Respond with a mocked response
      // any time our code calls "window.fetch".
      return new Response('hello')
    }

就是重写了 Fetch API，请求并不会真的发送，浏览器中也不会看到请求发出。效果类似下面这样：

![4363f11ef5274e2f9aac89946ce37a92.png][]

像下面这些库都是使用的这个策略：

*  [MirageJS][], 借助 [Pretender][]
 *  [nock][], 借助 [托管 Node.js 的 http/https 模块][Node.js _ http_https]
 *  [PollyJS][], 借助 [adapters][]

网页端是通过重写 `window.fetch`/`window.XMLHttpRequest`，而 Node.js 端则是通过重写 http/https 模块来实现请求拦截 Mock 的。

#### Mock 服务器 ####

Mock Request Client 的在浏览器上的一个明显弊端，就是其实我们并没有真正调用 Fetch API/XMLHttpRequest API，就直接返回 Mock 结果了。

因此，我们有了一个可选方案，就是去替换请求路径中的 server 部分，变成这样：

![e45dfa8d114e4fe188123781680144ec.png][]

反馈到代码上，我们就要这样写：

const IS_TEST = process.env.NODE_ENV === 'test'
    
    fetch(
      IS_TEST
        // Communicate with a local mock server while testing.
        ? 'http://localhost:3000/api'
        : 'https://api.backend.com'
      )

这就有点类似测试环境服务器了。虽然解决了能走到请求 API、看到请求的问题，这里列举了一些，可以用作这类似用途的库。

*  [JSON Server][]
 *  [Postman's mock servers][Postman_s mock servers]
 *  原始 [ExpressJS server][]

但是这需要我们多加一个判断条件，增加了一个 Mock 服务器，多了编写和维护的服务器的运营成本。

因此，选择那种方案，我们要根据实际情况，去做取舍。

如果我们把前端项目中的请求分成：客户端（浏览器）请求和服务端请求。**虽然，服务端请求现在还是只能老一套，只能通过重写 http/https 模块来实现请求拦截和 Mock，那么客户端请求因为有了 Service Worker 的介入带来了 Mock 曙光。**

### 客户端请求 Mock 新方式：Service Worker API ###

[Service Worker API][] 可以实现客户端请求的 Mock 新方式：在能看到网页请求发出的同时（开发者工具中能看到请求地址），还能做请求响应数据的 Mock。

简单点说，就是监听网页中的 fetch 事件。

// main.js
    
    if ('serviceWorker' in navigator) {
      window.addEventListener('load', function() {
        // 注册 Service Worker
        navigator.serviceWorker.register('/service-worker.js')
          .then(function(registration) {
            console.log('Service Worker registered with scope:', registration.scope);
          })
          .catch(function(error) {
            console.log('Service Worker registration failed:', error);
          });
      });
    }
    
    // service-worker.js
    
    // 拦截请求(fetch 事件会在网页中每发生一次数据请求时触发)
    self.addEventListener('fetch', event => {
      event.respondWith(
        new Response('Hello from the Service Worker!')
      );
    });

体实现原理，可以参考这篇文章：[《Use Service Workers to manage network requests》][Use Service Workers to manage network requests]

而 [Mock Service Worker][]（又叫 mwsjs）就是通过 Service Worker API 来做客户端请求 Mock 的（当然服务端还是借助重写 `http`/`https` 模块的方式）。

import { setupWorker, rest } from 'msw'
    
    const worker = setupWorker(
      rest.post('/login', async (req, res, ctx) => {
        const { username } = await req.json()
    
        return res(
          ctx.json({
            username,
            firstName: 'John'
          })
        )
      }),
    )
    
    worker.start()

关于 mwsjs 的使用，可以参考我写的文章[《mswjs：在浏览器和 Node 环境中轻松做 API Mocking》][mswjs_ Node _ API Mocking]了解。

感谢你阅读到这里，Happy Coding！

**最后：** 为了回馈铁杆粉丝们，我给大家整理了完整的软件测试视频学习教程，朋友们如果需要可以自行免费领取**`【保证100%免费】`**  
![在这里插 入图片描述][c9cc99a5b00b4900b7269ea5813e9b05.png_pic_center]

**软件测试面试文档**

我们学习必然是为了找到高薪的工作，下面这些面试题是来自阿里、腾讯、字节等一线互联网大厂最新的面试资料，并且有字节大佬给出了权威的解答，刷完这一套面试资料相信大家都能找到满意的工作。

![在这里插入图片描述][f5caea8e55384ffd9d53fbcef5d509f5.png_pic_center]  
![在这里插入图片描述][1f3393c627094612ba2054e5a8b81725.gif_pic_center]

[API Mocking Strategies for JavaScript Applications]: https://link.juejin.cn?target=https%3A%2F%2Fdev.to%2Fkettanaito%2Fapi-mocking-strategies-for-javascript-applications-48kl
[c39dd22f20ed4b0788ae3d4f7de4babe.png]: https://img-blog.csdnimg.cn/c39dd22f20ed4b0788ae3d4f7de4babe.png
[4363f11ef5274e2f9aac89946ce37a92.png]: https://img-blog.csdnimg.cn/4363f11ef5274e2f9aac89946ce37a92.png
[MirageJS]: https://link.juejin.cn?target=https%3A%2F%2Fgithub.com%2Fmiragejs%2Fmiragejs
[Pretender]: https://link.juejin.cn?target=https%3A%2F%2Fgithub.com%2Fpretenderjs%2Fpretender%2Fblob%2Fe4fa32ab491f5479bb1d0440be1f64e2904994c1%2Fsrc%2Findex.ts%23L32
[nock]: https://link.juejin.cn?target=https%3A%2F%2Fgithub.com%2Fnock%2Fnock
[Node.js _ http_https]: https://link.juejin.cn?target=https%3A%2F%2Fgithub.com%2Fnock%2Fnock%2Fblob%2F2134a418c358d4134233ffaf7bb25809a5869a71%2Flib%2Fcommon.js%23L93-L110
[PollyJS]: https://link.juejin.cn?target=https%3A%2F%2Fnetflix.github.io%2Fpollyjs
[adapters]: https://link.juejin.cn?target=https%3A%2F%2Fgithub.com%2FNetflix%2Fpollyjs%2Ftree%2Fcbca602a5a446da46a4a2834f893670b8c577880%2Fpackages%2F%2540pollyjs
[e45dfa8d114e4fe188123781680144ec.png]: https://img-blog.csdnimg.cn/e45dfa8d114e4fe188123781680144ec.png
[JSON Server]: https://link.juejin.cn?target=https%3A%2F%2Fgithub.com%2Ftypicode%2Fjson-server
[Postman_s mock servers]: https://link.juejin.cn?target=https%3A%2F%2Flearning.postman.com%2Fdocs%2Fdesigning-and-developing-your-api%2Fmocking-data%2Fsetting-up-mock%2F
[ExpressJS server]: https://link.juejin.cn?target=https%3A%2F%2Fexpressjs.com%2F
[Service Worker API]: https://link.juejin.cn?target=https%3A%2F%2Fdeveloper.mozilla.org%2Fen-US%2Fdocs%2FWeb%2FAPI%2FService_Worker_API
[Use Service Workers to manage network requests]: https://link.juejin.cn?target=https%3A%2F%2Flearn.microsoft.com%2Fen-us%2Fmicrosoft-edge%2Fprogressive-web-apps-chromium%2Fhow-to%2Fservice-workers
[Mock Service Worker]: https://link.juejin.cn?target=https%3A%2F%2Fgithub.com%2Fmswjs%2Fmsw
[mswjs_ Node _ API Mocking]: https://juejin.cn/post/7250177390278197304
[c9cc99a5b00b4900b7269ea5813e9b05.png_pic_center]: https://img-blog.csdnimg.cn/c9cc99a5b00b4900b7269ea5813e9b05.png#pic_center
[f5caea8e55384ffd9d53fbcef5d509f5.png_pic_center]: https://img-blog.csdnimg.cn/f5caea8e55384ffd9d53fbcef5d509f5.png#pic_center
[1f3393c627094612ba2054e5a8b81725.gif_pic_center]: https://img-blog.csdnimg.cn/1f3393c627094612ba2054e5a8b81725.gif#pic_center