這里給大家分享我在網上總結出來的一些知識，希望對大家有所幫助
背景
最近新接手了一批專案，還沒來得及接新需求，一大堆bug就接踵而至，仔細一看，應該回傳陣列的欄位回傳了 null，或者沒有回傳，甚至回傳了字串 "null"？？？
這我能忍？我立刻截圖發到群里，用紅框加大加粗重點標出，后端同學也積極回應，答應改正，
第二天，同樣的事情又在其他的專案上演，我只是一個小前端，為什么什么錯都找我啊！！
日子不能再這樣下去，于是我決定寫一個工具來解決遇到 bug 永遠在找前端的困境，
TypeScript 運行時校驗
如何對介面資料進行校驗呢，因為我們的專案是 React+TypeScript 寫的，所以第一時間就想到了使用 TypeScript 進行資料校驗，但是眾所周知，TypeScript 用于編譯時校驗，有沒有辦法作用到運行時呢？
我還真找到了一些運行時型別校驗的庫：typescript-needs-types，大部分需要使用指定格式撰寫代碼，相當于對專案進行重構，拿其中 star 最多的 zod 舉例，代碼如下，
import { z } from "zod";
const User = z.object({
username: z.string(),
});
User.parse({ username: "Ludwig" });
// extract the inferred type
type User = z.infer<typeof User>;
// { username: string }
我寧可查 bug 也不可能重構手里一大堆專案啊，此種方案 ?，
此時看到了 typescript-json-schema 可以把 TypeScript 定義轉為 JSON Schema ，然后再使用 JSON Schema 對資料進行校驗就可以啦，這種方案比較靈活，且對代碼入侵性較小，
搭建一個專案測驗一下！
使用 npx create-react-app my-app --template typescript 快速創建一個 React+TS 專案，
首先安裝依賴 npm install typescript-json-schema
創建型別檔案 src/types/user.ts
export interface IUserInfo {
staffId: number
name: string
email: string
}
然后創建 src/types/index.ts 檔案并引入剛才的型別，
import { IUserInfo } from './user';
interface ILabel {
id: number;
name: string;
color: string;
remark?: string;
}
type ILabelArray = ILabel[];
type IUserInfoAlias = IUserInfo;
接下來在 package.json 添加腳本
"scripts": {
// ...
"json": "typescript-json-schema src/types/index.ts '*' -o src/types/index.json --id=api --required --strictNullChecks"
}
然后運行 npm run json 可以看到新建了一個 src/types/index.json 檔案（此步在已有專案中可能會報錯報錯，可以嘗試在 json 命令中添加 --ignoreErrors 引數），打開檔案可以看到已經成功轉成了 JSON Schema 格式，
{
"$id": "api",
"$schema": "http://json-schema.org/draft-07/schema#",
"definitions": {
"ILabel": {
"properties": {
"color": {
"type": "string"
},
"id": {
"type": "number"
},
"name": {
"type": "string"
},
"remark": {
"type": "string"
}
},
"required": [
"color",
"id",
"name"
],
"type": "object"
},
"ILabelArray": {
"items": {
"$ref": "api#/definitions/ILabel"
},
"type": "array"
},
"IUserInfoAlias": {
"properties": {
"email": {
"type": "string"
},
"name": {
"type": "string"
},
"staffId": {
"type": "number"
}
},
"required": [
"email",
"name",
"staffId"
],
"type": "object"
}
}
}
使用 JSON Schema 校驗資料
至于如何使用JSON Schema 校驗資料，我找到了現成的庫 ajv，至于為什么選擇 ajv，主要是因為它說它很快，詳見：github.com/ebdrup/json…
接下來嘗試一下，我找到了中文版檔案，有興趣的可以去看下 www.febeacon.com/ajv-docs-zh…
先安裝依賴 npm install ajv，然后創建檔案 src/validate.ts
import Ajv from 'ajv';
import schema from './types/index.json';
const ajv = new Ajv({ schemas: [schema] });
export function validateDataByType(type: string, data: unknown) {
console.log(`開始校驗，型別：${type}， 資料：`, data);
var validate = ajv.getSchema(`api#/definitions/${type}`);
if (validate) {
const valid = validate(data);
if (!valid) {
console.log('校驗失敗', validate.errors);
}
else {
console.log('校驗成功');
}
}
}
接下來在 src/index.tsx 添加下面代碼來測驗一下，
validateDataByType('IUserInfoAlias', {
email: '[email protected]',
name: 'idonteatcookie',
staffId: 12306
})
validateDataByType('IUserInfoAlias', {
email: '[email protected]',
staffId: 12306
})
validateDataByType('IUserInfoAlias', {
email: '[email protected]',
name: 'idonteatcookie',
staffId: '12306'
})
可以在控制臺看到成功列印如下資訊：
攔截請求
因為專案中發送請求都是呼叫統一封裝的函式，所以我首先想到的是在函式中增加一層校驗邏輯，但是這樣的話就與專案代碼耦合嚴重，換一個專案又要再寫一份，我真的有好多專案QAQ，
那干脆攔截所有請求統一處理好了，
很容易的找到了攔截所有 XMLHttpRequest 請求的庫 ajax-hook，可以非常簡單地對請求做處理，
首先安裝依賴 npm install ajax-hook，然后創建 src/interceptTool.ts：
import { proxy } from 'ajax-hook';
export function intercept() {
// 獲取 XMLHttpRequest 發送的請求
proxy({
onResponse: (response: any, handler: any) => {
console.log('xhr', response.response)
handler.next(response);
},
});
}
這樣就攔截了所有的 XMLHttpRequest 發送的請求，但是我突然想到我們的專案，好像使用 fetch 發送的請求來著？？？
好叭，那就再攔截一遍 fetch 發送的請求，
export function intercept() {
// ...
const { fetch: originalFetch } = window;
// 獲取 fetch 發送的請求
window.fetch = async (...args) => {
const response = await originalFetch(...args);
response.clone().json().then((data: { result: any }) => {
console.log('window.fetch', args, data);
return data;
});
return response;
};
}
為了證明攔截成功，使用 json-server 搭建一個本地 mock 服務器，首先安裝 npm install json-server，然后在根目錄創建檔案 db.json：
{
"user": { "staffId": 1, "name": "cookie1", "email": "[email protected]" },
"labels": [
{
"id": 1,
"name": "ck",
"color": "red",
"remark": "blabla"
},
{
"id": 2,
"color": "green"
}
]
}
再在 package.json 添加腳本
"scripts": {
"serve": "json-server --watch db.json -p 8000"
},
現在執行 npm run serve 就可以啟動服務器了，在 src/index.tsx 增加呼叫介面的代碼，并引入 src/interceptTool.ts，
import { intercept } from './interceptTool';
// ... other code
intercept();
fetch('http://localhost:8000/user');
const xhr = new XMLHttpRequest();
xhr.open('GET', 'http://localhost:8000/labels');
xhr.send();
可以看到兩種請求都攔截成功了，
校驗介面回傳資料
勝利在望，只差最后一步，校驗回傳資料，我們校驗資料需要提供兩個關鍵資訊，資料本身和對應的型別名，為了將兩者對應起來，需要再創建一個映射檔案，把 url 和型別名對應起來，
創建檔案 src/urlMapType.ts 然后添加內容
export const urlMapType = {
'http://localhost:8000/user': 'IUserInfoAlias',
'http://localhost:8000/labels': 'ILabelArray',
}
我們在 src/validate.ts 新增函式 validateDataByUrl
import { urlMapType } from './urlMapType';
// ...
export function validateDataByUrl(url: string, data: unknown) {
const type = urlMapType[url as keyof typeof urlMapType];
if (!type) {
// 沒有定義對應格式不進行校驗
return;
}
console.log(`==== 開始校驗 === url ${url}`);
validateDataByType(type, data);
}
然后在 src/interceptTool.ts 檔案中參考
import { proxy } from 'ajax-hook';
import { validateDataByUrl } from './validate';
export function intercept() {
// 獲取 XMLHttpRequest 發送的請求
proxy({
onResponse: (response, handler: any) => {
validateDataByUrl(response.config.url, JSON.parse(response.response));
handler.next(response);
},
});
const { fetch: originalFetch } = window;
// 獲取 fetch 發送的請求
window.fetch = async (...args) => {
const response = await originalFetch(...args);
response.json().then((data: any) => {
validateDataByUrl(args[0] as string, data);
return data;
});
return response;
};
}
現在可以在控制臺看到介面資料校驗的介面辣~ ??ヽ(°▽°)ノ?
總結下流程圖
后續規劃
目前所做的事情，準確的說不是攔截，只是獲取回傳資料，然后對比列印校驗結果，因為初步目標不涉及資料的處理，
后續會考慮對不合法的資料進行處理，比如應該回傳陣列但是回傳了 null 的情況，如果能自動賦值 []，就可以防止前端頁面崩潰的情況了，
本文轉載于:
https://juejin.cn/post/7166061734803963917
如果對您有所幫助，歡迎您點個關注，我會定時更新技術檔案，大家一起討論學習，一起進步，
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/545359.html
標籤：其他