常見JS前端接口校驗方式總結

更新時間：2023年05月19日 09:42:46 作者：??????????????????

作為一名優(yōu)秀的接口調用工程師，對接口的返回信息進行校驗是必不可少的，本文整理的是一些常用的校驗方式，希望能夠對大家有所幫助

作為一名優(yōu)秀的接口調用工程師，對接口的返回信息進行校驗是必不可少的。校驗需要保證所返回的數(shù)據(jù)格式和內(nèi)容正確，以此確保頁面的正確展示和用戶體驗。以下是一些常用的校驗方式，希望能夠對大家有所幫助。

1. 檢查返回數(shù)據(jù)的類型

在接口返回數(shù)據(jù)中，最基本的校驗就是檢查返回數(shù)據(jù)的類型是否符合預期。返回數(shù)據(jù)類型的判斷可以使用JavaScript內(nèi)置的 typeof 操作符實現(xiàn)。

if (typeof responseData === 'object') {
    // 處理返回結果為對象的情況
} else if (typeof responseData === 'string') {
    // 處理返回結果為字符串的情況
} else if (typeof responseData === 'number') {
    // 處理返回結果為數(shù)字的情況
}

這里，我們使用了 typeof 判斷數(shù)據(jù)類型，根據(jù)不同的類型來處理和展示結果。

2. 校驗返回數(shù)據(jù)的結構

在確定了返回數(shù)據(jù)的類型后，接下來需要對接口返回數(shù)據(jù)的各個字段進行校驗。一個常見的方式是使用斷言庫（如 chai）提供的 expect 語法。

假設我們調用了一個獲取商品詳情的接口，并期望該接口返回如下結構：

{
    "product_id": "123",
    "name": "iPhone 15",
    "price": 9999,
    "specs": ["256GB", "512GB", "1T"],
    "images": [
        {
            "url": "https://example.com/iphone_15_1.jpg",
            "alt": "iPhone 15 正面照片"
        },
        {
            "url": "https://example.com/iphone_15_2.jpg",
            "alt": "iPhone 15 背面照片"
        }
    ]
}

我們可以這樣使用 expect：

const chai = require('chai');
const expect = chai.expect;
describe('Product API', function() {
  it('should return product detail correctly', (done) => {
    // call the API to get produt detail
    api.getProductDetail(123, function(responseData) {
      expect(responseData).to.be.an('object');
      expect(responseData.product_id).to.equal('123');
      expect(responseData.name).to.be.a('string');
      expect(responseData.price).to.be.a('number');
      expect(responseData.specs).to.be.an('array').that.includes('256GB');
      expect(responseData.images[0]).to.have.all.keys('url', 'alt');
      done();
    });
  });
});

在上例中，我們對返回數(shù)據(jù)的每個字段進行了詳細的校驗。如果某個字段不符合預期，expect 會拋出一個錯誤。

3. 校驗返回數(shù)據(jù)的內(nèi)容

除了校驗返回結果的結構外，還需要檢查返回數(shù)據(jù)的具體內(nèi)容是否正確。例如，當調用注冊接口時，需要確保返回結果中是否包含如下信息：

{
    "status": "success",
    "message": "ok",
    "data": {
        "user_id": 123,
        "username": "jackie"
    }
}

我們可以用以下方式進行校驗：

assert.equal(responseData.status, 'success');
assert.include(responseData.message, 'ok');
assert.isObject(responseData.data);
assert.isNumber(responseData.data.user_id);
assert.typeOf(responseData.data.username, 'string');

在使用 assert 校驗函數(shù)時，如果值不符合預期，則會拋出異常。

4. 檢查錯誤碼

對于有些業(yè)務場景下的接口，可能會返回特定的錯誤碼。這種情況下，需要對錯誤碼進行詳細的檢查和處理。

以乘客接口為例，返回結果中可能存在以下的錯誤碼：

100001: 請求參數(shù)有誤
100002: 未查詢到該行程信息
100003: 班次已過期，請重新選擇
100004: 余票不足
100005: 當前登錄狀態(tài)已失效，請重新登錄
100006: 訂單已取消或已完成
100007: 訂單不存在

針對不同的錯誤碼，我們可以提供相應的錯誤提示信息，以便用戶更好地理解問題所在。

switch (errorCode) {
    case '100001':
        console.log('請求參數(shù)有誤');
        break;
    case '100002':
        console.log('未查詢到該行程信息');
        break;
    case '100003':
        console.log('班次已過期，請重新選擇');
        break;
    case '100004':
        console.log('余票不足');
        break;
    case '100005':
        console.log('當前登錄狀態(tài)已失效，請重新登錄');
        break;
    case '100006':
        console.log('訂單已取消或已完成');
        break;
    case '100007':
        console.log('訂單不存在');
        break;
    default:
        console.log('未知錯誤');
}

在處理錯誤碼時，我們使用了 switch 語句來根據(jù)錯誤碼輸出相應的錯誤提示信息。

5. 防止XSS攻擊

由于惡意腳本注入可能會造成 XSS 攻擊，因此需要對接口返回的數(shù)據(jù)進行過濾和轉義處理。

假設有如下代碼：

const data = JSON.parse(responseData);
document.getElementById('content').innerHTML = data.content;

當接口返回的內(nèi)容為 <script>alert('XSS')</script> 時，就有可能觸發(fā) XSS 攻擊。為了避免這種情況，需要將接口返回數(shù)據(jù)中的特殊字符進行處理。

const escapeHtml = (unsafe) => {
    return unsafe
        .replace(/&/g, '&amp;')
        .replace(/</g, '&lt;')
        .replace(/>/g, '&gt;')
        .replace(/"/g, '&quot;')
        .replace(/'/g, '&#039;');
}

const data = JSON.parse(responseData);
document.getElementById('content').innerHTML = escapeHtml(data.content);

在上例中，我們定義了一個 escapeHtml 函數(shù)，用于將接口返回數(shù)據(jù)中的特殊字符進行轉義處理。這樣，即使接口返回的內(nèi)容中存在惡意腳本，也可以有效地避免 XSS 攻擊。