使用 React.js 中的 API 测试器渲染美化的 API JSON 响应

2020-10-01 08:00:00 · 飞浪

在 React.js 中创建一个简单的工具，让您能够直接在网页上以适当的缩进和格式直观地显示 API 返回的值的结构。

介绍

作为前端开发人员，您经常会发现自己正在调试 JSON 格式的 API 返回值。在大多数情况下，这些返回值被构造成复杂的嵌套信息对象。最好直接在网页本身中以适当的缩进和格式可视化 API 返回值的结构。在本指南中，您将在 React.js 中创建一个简单的工具来执行此操作。

设置

首先，创建一个名为APITester的 React.js 组件，其最初如下所示：

      import React from 'react';
import $ from 'jquery';

export default class APITester extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      jsonData: {},
      apiEndpoint: ""
    }
  }

  render() {
    return (
      <div>
        <pre>
          {this.state.jsonData}
        </pre>
        <hr/>
        <input
          type="text"
        />
        <button>
          Fetch
        </button>
      </div>
    );
  }
}
    

有两个主要状态变量需要维护：

jsonData：用于存储端点的响应
apiEndpoint：用户将指定的 API 端点

API 端点的用户输入

接下来，填写用户将在输入元素中输入 API 端点的功能。每次更改都会更新apiEndpoint状态值。

首先，创建一个事件处理程序，在每次修改输入元素时触发：

      handleEndpointChanged(event) {
  this.setState({
    apiEndpoint: event.target.value;
  });
}
    

此函数所做的就是从event.target更新状态属性apiEndpoint的值，该值指向此函数引用的输入元素。

将事件处理程序附加到输入元素的onChange属性：

      <input
  type="text"
  onChange={this.handleEndpointChanged.bind(this)}
/>
    

从端点获取数据

接下来，创建每次单击按钮时的事件处理程序：

      handleButtonClicked() {
  var context = this;

  $.ajax({
    url: context.state.apiEndpoint,
    dataType: "json",
    method: "GET",
    success: function(response) {
      context.setState({
        jsonData: response
      });
    }
  });
}
    

此函数从用户指定的端点获取数据，然后将其更新为值apiEndpoint。预期返回值为dataType: "json"。成功调用后，状态属性jsonData将必须更新为response的值，该值包含 API 端点apiEndpoint的实际返回值。还要注意，该函数使用变量context来引用this ，它是组件本身的一个实例。这是必要的，因此您仍然可以从成功函数中引用setState()方法。在将 ajax 调用中的url值分配给context.state.apiEndpoint时也可以看到这一点。

接下来，将事件处理程序附加到按钮的onClick属性：

      <button
  onClick={this.handleButtonClicked.bind(this)}
>
  Fetch
</button>
    

一旦单击按钮，函数handleButtonClicked将触发，并与 ajax 调用一起设置jsonData的值，以便以美化的格式显示（即具有适当的缩进、引号和对象嵌套）。

渲染美化版本

每次触发setState时，都会调用render()函数，从而更新此组件的预期界面。为了确保显示的 JSON 数据符合正确的格式，有两个要求：

确保使用适当的转义字符来格式化制表符和嵌套对象 JSON。
将格式化的 JSON 呈现为<pre>标签以在 Web 上保留其格式。

你的render()代码看起来应该像这样：

      render() {
  return (
    <div>
      <pre>
        {JSON.stringify(this.state.jsonData, undefined 2)}
      </pre>
      <hr/>
      <input
        type="text"
        onChange={this.handleEndpointChanged.bind(this)}
      />
      <button
        onClick={this.handleButtonClicked.bind(this)}
      >
        Fetch
      </button>
    </div>
  );
}
    

您必须调用JSON.stringify(someJsonData, undefined 2)函数来插入必要的转义字符，以正确格式化对象。接下来，确保JSON.stringify之后的结果值呈现在<pre>标记之间。这将允许页面保留转义字符以正确格式化显示，从而产生美化效果。

总体代码

      import React from 'react';
import $ from 'jquery';

export default class APITester extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      jsonData: {},
      apiEndpoint: ""
    }
  }

  handleEndpointChanged(event) {
    this.setState({
      apiEndpoint: event.target.value
    });
  }

  handleButtonClicked() {
    var context = this;

    $.ajax({
      url: context.state.apiEndpoint,
      dataType: "json",
      method: "GET",
      success: function(response) {
        context.setState({
          jsonData: response
        });
      }
    });
  }

  render() {
    return (
      <div>
        <pre>
          {JSON.stringify(this.state.jsonData, undefined, 2)}
        </pre>
        <hr/>
        <input
          type="text"
          onChange={this.handleEndpointChanged.bind(this)}
        />
        <button
          onClick={this.handleButtonClicked.bind(this)}
        >
          Fetch
        </button>
      </div>
    );
  }
}
    

通过在输入元素中输入https://api.coindesk.com/v1/bpi/currentprice.json并点击 Fetch来尝试一下。它应该返回与比特币价格相关的数据，并以正确的格式呈现在网页上。

结论

在本指南中，您创建了一个组件，该组件接受来自用户的 URL 端点，该端点表示预期返回 JSON 数据的 API。要检查返回值，必须先使用 JSON.stringify ()函数将 JSON 响应清理为具有适当格式的字符串。在呈现为 HTML 时，为了保留字符串化 JSON 中的转义字符，值必须位于<pre>标记内。这样，呈现的数据对用户来说更易于呈现，以便进一步分析响应。

自己尝试一下，并尝试扩展组件以包含以下内容：

GET 和 POST 之间的区别
请求的附加参数（也由用户提供）
错误处理（如果 API 端点不返回数据类型 JSON）

_{免责声明：本内容来源于第三方作者授权、网友推荐或互联网整理，旨在为广大用户提供学习与参考之用。所有文本和图片版权归原创网站或作者本人所有，其观点并不代表本站立场。如有任何版权侵犯或转载不当之情况，请与我们取得联系，我们将尽快进行相关处理与修改。感谢您的理解与支持！}

_查看原文

技术指南

阅读全文

使用 React.js 中的 API 测试器渲染美化的 API JSON 响应

杭州电子商务研究院

4年前 · 面向社会、服务行业、政产学研结合、整合资源、和谐发展

import React from 'react'; import $ from 'jquery'; export default class APITester extends React.Component { constructor(props) { super(props); this.state = { jsonData: {}, apiEndpoint: "" } } render() { return ( <div> <pre> {this.state.jsonData} </pre> <hr/> <input type="text" /> <button> Fetch </button> </div> ); } }

handleButtonClicked() { var context = this; $.ajax({ url: context.state.apiEndpoint, dataType: "json", method: "GET", success: function(response) { context.setState({ jsonData: response }); } }); }

render() { return ( <div> <pre> {JSON.stringify(this.state.jsonData, undefined 2)} </pre> <hr/> <input type="text" onChange={this.handleEndpointChanged.bind(this)} /> <button onClick={this.handleButtonClicked.bind(this)} > Fetch </button> </div> ); }

import React from 'react'; import $ from 'jquery'; export default class APITester extends React.Component { constructor(props) { super(props); this.state = { jsonData: {}, apiEndpoint: "" } } handleEndpointChanged(event) { this.setState({ apiEndpoint: event.target.value }); } handleButtonClicked() { var context = this; $.ajax({ url: context.state.apiEndpoint, dataType: "json", method: "GET", success: function(response) { context.setState({ jsonData: response }); } }); } render() { return ( <div> <pre> {JSON.stringify(this.state.jsonData, undefined, 2)} </pre> <hr/> <input type="text" onChange={this.handleEndpointChanged.bind(this)} /> <button onClick={this.handleButtonClicked.bind(this)} > Fetch </button> </div> ); } }