常见JS前端接口校验方式总结

作为一名优秀的接口调用工程师，对接口的返回信息进行校验是必不可少的。校验需要保证所返回的数据格式和内容正确，以此确保页面的正确展示和用户体验。以下是一些常用的校验方式，希望能够对大家有所帮助。

1. 检查返回数据的类型

在接口返回数据中，最基本的校验就是检查返回数据的类型是否符合预期。返回数据类型的判断可以使用JavaScript内置的 typeof 操作符实现。

if (typeof responseData === 'object') {
   // 处理返回结果为对象的情况
} else if (typeof responseData === 'string') {
   // 处理返回结果为字符串的情况
} else if (typeof responseData === 'number') {
   // 处理返回结果为数字的情况
}

这里，我们使用了 typeof 判断数据类型，根据不同的类型来处理和展示结果。

2. 校验返回数据的结构

在确定了返回数据的类型后，接下来需要对接口返回数据的各个字段进行校验。一个常见的方式是使用断言库（如 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();
   });
 });
});

在上例中，我们对返回数据的每个字段进行了详细的校验。如果某个字段不符合预期，expect 会抛出一个错误。

3. 校验返回数据的内容

除了校验返回结果的结构外，还需要检查返回数据的具体内容是否正确。例如，当调用注册接口时，需要确保返回结果中是否包含如下信息：

{
   "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 校验函数时，如果值不符合预期，则会抛出异常。

4. 检查错误码

对于有些业务场景下的接口，可能会返回特定的错误码。这种情况下，需要对错误码进行详细的检查和处理。

以乘客接口为例，返回结果中可能存在以下的错误码：

• 100001: 请求参数有误

• 100002: 未查询到该行程信息

• 100003: 班次已过期，请重新选择

• 100004: 余票不足

• 100005: 当前登录状态已失效，请重新登录

• 100006: 订单已取消或已完成

• 100007: 订单不存在

针对不同的错误码，我们可以提供相应的错误提示信息，以便用户更好地理解问题所在。

switch (errorCode) {
   case '100001':
       console.log('请求参数有误');
       break;
   case '100002':
       console.log('未查询到该行程信息');
       break;
   case '100003':
       console.log('班次已过期，请重新选择');
       break;
   case '100004':
       console.log('余票不足');
       break;
   case '100005':
       console.log('当前登录状态已失效，请重新登录');
       break;
   case '100006':
       console.log('订单已取消或已完成');
       break;
   case '100007':
       console.log('订单不存在');
       break;
   default:
       console.log('未知错误');
}

在处理错误码时，我们使用了 switch 语句来根据错误码输出相应的错误提示信息。

5. 防止XSS攻击

由于恶意脚本注入可能会造成 XSS 攻击，因此需要对接口返回的数据进行过滤和转义处理。

假设有如下代码：

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

当接口返回的内容为 <script>alert('XSS')</script> 时，就有可能触发 XSS 攻击。为了避免这种情况，需要将接口返回数据中的特殊字符进行处理。

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 函数，用于将接口返回数据中的特殊字符进行转义处理。这样，即使接口返回的内容中存在恶意脚本，也可以有效地避免 XSS 攻击。

来源：https://juejin.cn/post/7226166594710896695