快捷導(dǎo)航

常見JS前端接口校驗(yàn)方式總結(jié)

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

作為一名優(yōu)秀的接口調(diào)用工程師，對(duì)接口的返回信息進(jìn)行校驗(yàn)是必不可少的，本文整理的是一些常用的校驗(yàn)方式，希望能夠?qū)Υ蠹矣兴鶐椭?/div>

作為一名優(yōu)秀的接口調(diào)用工程師，對(duì)接口的返回信息進(jìn)行校驗(yàn)是必不可少的。校驗(yàn)需要保證所返回的數(shù)據(jù)格式和內(nèi)容正確，以此確保頁(yè)面的正確展示和用戶體驗(yàn)。以下是一些常用的校驗(yàn)方式，希望能夠?qū)Υ蠹矣兴鶐椭?/p>

1. 檢查返回?cái)?shù)據(jù)的類型

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

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

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

2. 校驗(yàn)返回?cái)?shù)據(jù)的結(jié)構(gòu)

在確定了返回?cái)?shù)據(jù)的類型后，接下來需要對(duì)接口返回?cái)?shù)據(jù)的各個(gè)字段進(jìn)行校驗(yàn)。一個(gè)常見的方式是使用斷言庫(kù)（如 chai）提供的 expect 語(yǔ)法。

假設(shè)我們調(diào)用了一個(gè)獲取商品詳情的接口，并期望該接口返回如下結(jié)構(gòu)：

{
    "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();
    });
  });
});

在上例中，我們對(duì)返回?cái)?shù)據(jù)的每個(gè)字段進(jìn)行了詳細(xì)的校驗(yàn)。如果某個(gè)字段不符合預(yù)期，expect 會(huì)拋出一個(gè)錯(cuò)誤。

3. 校驗(yàn)返回?cái)?shù)據(jù)的內(nèi)容

除了校驗(yàn)返回結(jié)果的結(jié)構(gòu)外，還需要檢查返回?cái)?shù)據(jù)的具體內(nèi)容是否正確。例如，當(dāng)調(diào)用注冊(cè)接口時(shí)，需要確保返回結(jié)果中是否包含如下信息：

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

我們可以用以下方式進(jìn)行校驗(yàn)：

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 校驗(yàn)函數(shù)時(shí)，如果值不符合預(yù)期，則會(huì)拋出異常。

4. 檢查錯(cuò)誤碼

對(duì)于有些業(yè)務(wù)場(chǎng)景下的接口，可能會(huì)返回特定的錯(cuò)誤碼。這種情況下，需要對(duì)錯(cuò)誤碼進(jìn)行詳細(xì)的檢查和處理。

以乘客接口為例，返回結(jié)果中可能存在以下的錯(cuò)誤碼：

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

針對(duì)不同的錯(cuò)誤碼，我們可以提供相應(yīng)的錯(cuò)誤提示信息，以便用戶更好地理解問題所在。

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

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

5. 防止XSS攻擊

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

假設(shè)有如下代碼：

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

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

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);

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

總結(jié)

以上是一些常見的前端接口校驗(yàn)方式。雖然每個(gè)項(xiàng)目的接口規(guī)范不盡相同，但總體來說，校驗(yàn)接口返回?cái)?shù)據(jù)的類型、結(jié)構(gòu)、內(nèi)容和錯(cuò)誤碼，以及防止惡意腳本注入等操作，都是前端開發(fā)者必須掌握的技能。

到此這篇關(guān)于常見JS前端接口校驗(yàn)方式總結(jié)的文章就介紹到這了,更多相關(guān)JS前端接口校驗(yàn)內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: