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

 更新时间:2023年05月19日 09:42:46   作者:𝑺𝒉𝒊𝒉𝑯𝒔𝒊𝒏𝒈  
作为一名优秀的接口调用工程师,对接口的返回信息进行校验是必不可少的,本文整理的是一些常用的校验方式,希望能够对大家有所帮助

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

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 攻击。

总结

以上是一些常见的前端接口校验方式。虽然每个项目的接口规范不尽相同,但总体来说,校验接口返回数据的类型、结构、内容和错误码,以及防止恶意脚本注入等操作,都是前端开发者必须掌握的技能。

到此这篇关于常见JS前端接口校验方式总结的文章就介绍到这了,更多相关JS前端接口校验内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • JavaScript脚本性能的优化方法

    JavaScript脚本性能的优化方法

    JavaScript是一种解释型语言,所以能无法达到和C/Java之类的水平,限制了它能在客户端所做的事情,为了能改进他的性能,我想基于我以前给JavaScript做过的很多测试来谈谈自己的经验,希望能帮助大家改进自己的JavaScript脚本性能。
    2007-02-02
  • 详解JS浏览器事件模型

    详解JS浏览器事件模型

    这篇文章主要介绍了JS浏览器事件模型,对时间模型感兴趣的同学,可以参考下
    2021-05-05
  • JavaScript如何实现在文本框(密码框)输入提示语

    JavaScript如何实现在文本框(密码框)输入提示语

    为了更好的达到用户体验度,我们在登录表单时会有一些提示语言,比如说:“请输入用户名”和“请输入密码”等语言,下面小编通过本篇文章给大家分享JavaScript如何实现在密码框中出现提示语,对js密码框提示语相关知识感兴趣的朋友一起学习吧
    2015-12-12
  • 浅谈webpack打包过程中因为图片的路径导致的问题

    浅谈webpack打包过程中因为图片的路径导致的问题

    下面小编就为大家分享一篇浅谈webpack打包过程中因为图片的路径导致的问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-02-02
  • 微信小程序购物车、父子组件传值及calc的注意事项总结

    微信小程序购物车、父子组件传值及calc的注意事项总结

    这篇文章主要给大家介绍了关于微信小程序购物车、父子组件传值及calc的注意事项的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2018-11-11
  • JavaScript onclick事件使用方法详解

    JavaScript onclick事件使用方法详解

    这篇文章主要介绍了JavaScript onclick事件使用方法详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2020-05-05
  • js同时按下两个方向键

    js同时按下两个方向键

    本文通过实例代码给大家介绍了js同时按下两个方向键的实现方法,感兴趣的朋友跟随脚本之家小编一起看看吧
    2007-12-12
  • bootstrap表单按回车会自动刷新页面的解决办法

    bootstrap表单按回车会自动刷新页面的解决办法

    这篇文章主要介绍了bootstrap表单按回车会自动刷新页面的问题及解决办法,非常不错,具有参考借鉴价值,需要的朋友可以参考下
    2017-03-03
  • 微信公众号服务器验证Token步骤图解

    微信公众号服务器验证Token步骤图解

    这篇文章主要介绍了微信公众号服务器验证Token步骤图解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2019-12-12
  • javascript写一个ajax自动拦截并下载数据代码实例

    javascript写一个ajax自动拦截并下载数据代码实例

    这篇文章主要介绍了javascript写一个ajax自动拦截并下载数据代码实例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2019-09-09

最新评论