【API集成】代码块之JavaScript调用API

张春泉（Team） 2023-11-04 18:08:41 分享集成API 收藏

13 / 4297

引子

　　明道云的产品之前也介绍过了。但是契合点还没介绍，这里先做个普及及铺垫，具体见下图。今天的话题就是其中一个特性的实际场景中遇见的问题的延伸。

正文

概述：利用数据接口获取/写入数据并构建管理看板应用。
　　数据对接各种各样的方法具体请参考【APaaS 如何和其他应用实现数据集成】.这里详细讲解下消息集成--API 主动调用. (PS:被动 webhook 无难点，不在讲解。参考：Webhook 节点)
　　客户企业数字化转型，有的是文档系统，有的是公司定制的软件。有的是从它方平台转移到明道云。(可想而知明道云的强大)，文档系统的对接就是 Excel 数据导入。软件及其他平台的数据对接最快的方式就是使用 API 来对接。
　　传统的业务软件 API 授权验证的普遍性很低，大多都是 webservice 形式。有的接口是需要使用 PUT DELETE 的方法，有些接口需要参数类型需为 XML.甚至有些接口传参不能带字符集。这就造成了明道 WebHook 对这些接口不适用。
　　是该工程狮/程序猿上场，使用明道发大招了。明道云应用---工作流--代码块节点。(👀️ ~~是时候表演真正的技术了。上上下下 BABA~~)
PS：明道云支持 python 与 nodejs 的官方类库包.~~(python 不精通我拿 nodejs 来讲解，见笑了~~ 😄 )

那么我们就来详细讲解 nodejs 中的 fecth

fetch 基本介绍

1.什么是 fetch?
fetch() 是 XMLHttpRequest 的升级版，用于在 JavaScript 脚本里面发出 HTTP 请求。fetch() 的功能与 XMLHttpRequest 基本相同，但有三个主要的差异。

（1）fetch() 使用 Promise，不使用回调函数，因此大大简化了写法，写起来更简洁。

（2）fetch() 采用模块化设计，API 分散在多个对象上（Response 对象、Request 对象、Headers 对象），更合理一些；相比之下，XMLHttpRequest 的 API 设计并不是很好，输入、输出、状态都在同一个接口管理，容易写出非常混乱的代码。

（3）fetch() 通过数据流（Stream 对象）处理数据，可以分块读取，有利于提高网站性能表现，减少内存占用，对于请求大文件或者网速慢的场景相当有用。XMLHTTPRequest 对象不支持数据流，所有的数据必须放在缓存里，不支持分块读取，必须等待全部拿到后，再一次性吐出来。

2.fecth 用法如下：

fetch(url)
fetch(url,optionObj)

let response = await fetch('/readme.txt');
console.log(response.status);
console.log(response.statusText);
}

判断请求是否成功

if (response.ok) {
  // 请求成功
} else {
  // 请求失败
}

读取内容的方法

Response 对象根据服务器返回的不同类型的数据，提供了不同的读取方法。

response.text()：得到文本字符串。

response.json()：得到 JSON 对象。

response.blob()：得到二进制 Blob 对象。

response.formData()：得到 FormData 表单对象。

response.arrayBuffer()：得到二进制 ArrayBuffer 对象。

获取 JSON

const response = await fetch('/users.json');
const body = await response.json();
document.body.innerHTML = body

获取文本文件

const response = await fetch('/users.html');
const body = await response.text();
document.body.innerHTML = body

获取二进制文件，在页面显示。

const response = await fetch('flower.jpg');
const myBlob = await response.blob();
const objectURL = URL.createObjectURL(myBlob);

const myImage = document.querySelector('img');
myImage.src = objectURL;

主要用于获取流媒体文件。

const audioCtx = new window.AudioContext();
const source = audioCtx.createBufferSource();

const response = await fetch('song.ogg');
const buffer = await response.arrayBuffer();

const decodeData = await audioCtx.decodeAudioData(buffer);
source.buffer = buffer;
source.connect(audioCtx.destination);
source.loop = true;

####### optionObj 参数配置

optionObj 就是第二个参数。

HTTP 请求的方法、标头、数据体都在这个对象里面设置。下面是一些示例。

method：HTTP 请求的方法，POST、DELETE、PUT都在这个属性设置。
headers：一个对象，用来定制 HTTP 请求的标头。
body：POST 请求的数据体。

提交 JSON 数据

const user =  { name:  'John', surname:  'Smith'  };
const response = await fetch('/article/fetch/post/user', {
  method: 'POST',
  headers: {
   'Content-Type': 'application/json;charset=utf-8'
  }, 
  body: JSON.stringify(user) 
});

上面示例中，标头 Content-Type 要设成 'application/json;charset=utf-8'。因为默认发送的是纯文本，Content-Type 的默认值是 'text/plain;charset=UTF-8'。

请求头 Header 都能设置了那么 WebService 也就能调用了，参考
webservice 接口 SOAP 1.1 header 需要添加 Content-Type,SOAPAction 配置，有心为 webservice 返回的一般是 XML 格式所以对应的代码块中需要加入 XML 的解析包。
.贴个调用 Webservice 代码参考如下：

const fetch = require("node-fetch");
const xml2js = require('xml2js');
var url = " ";
var result = {};
var data = {};
var xml = '<?xml version="1.0" encoding="utf-8"?><soap:Envelope xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:xsd="http://www.w3.org/2001/XMLSchema" xmlns:soap="http://xxx/"><soap:Body><StuQfxx xmlns="http://xxx/"><xh>20183460</xh></StuQfxx></soap:Body></soap:Envelope>';
async function getAll(xml) {
  const res = await fetch(url, {
    method: "post",
    headers: {
      "Content-Type": "text/xml; charset=utf-8",
      "SOAPAction": "http://xxx"
    },
    body: xml,
  })
    .then(function (response) {
      if (response.ok) {
        return response.text();
      } else {
        return "无数据";
      }
    })
    .catch(function (err) {
      return { error: "Fetch错误:" + err };
    });
  const result = await res;
  return result;
}
result = await getAll(xml);
var wsResult='';
const Xml2js = require('xml2js');
const Parser = new Xml2js.Parser({explicitArray: false, ignoreAttrs: false});
Parser.parseString(result, function (err, data) {
    if (err) console.log(err);
    wsResult = data['soap:Envelope']['soap:Body'].xxx;
 });
output = { result: wsResult };

以上完结。

终章

　　明道云应用平台是中国市场主流的 APaaS 产品。产品简洁易懂，实现度灵活，数据开放，并具备跨云部署能力。在商业模式上，明道云主要和各领域 ISV 合作提供终端客户服务。目前明道云 APaaS 已经拥有超过 1000 家大中小型客户，其中通过 ISV 实现集成服务的标杆企业客户包括三一重工、触控科技、中国人民银行、国家电网（陕西）、中国科技协会、中国银联、安信证券、红星美凯龙、中国人保财险、中油瑞飞、华润置地、泰康人寿、格朗吉斯铝业、佛山地铁、优锘科技等。

你还在等待什么 😄 快来使用加入明道云 ❤️

Mas 2023-11-04 18:08:41 回复

UnhandledPromiseRejectionWarning: ReferenceError: fetch is not defined at API

frank.lin 2023-08-30 17:29:09 回复

SaaS 版能加一下这个包吗？SOAP

在 JavaScript 和 Node.js 中，可以使用第三方库来调用传统的 webservice 接口。其中比较流行的库是 soap 和 axios。下面分别介绍这两个库的使用方法：

使用 soap 库调用 webservice 接口：

首先，通过 npm 安装 soap 库：npm install soap。
在代码中引入 soap 库：const soap = require('soap')。
使用 soap.createClient 方法创建 webservice 客户端，传入 webservice 的 wsdl 地址和回调函数。回调函数的参数是 client 对象，可以用它来调用 webservice 方法。
使用 client 对象的 methodName 方法调用具体的 webservice 方法，传入参数和回调函数。回调函数的参数是调用结果。
在回调函数中处理返回值。

以下是示例代码：

const soap = require('soap');

const wsdlUrl = 'http://your-webservice-url?wsdl';

soap.createClient(wsdlUrl, function(err, client) {
  if (err) {
    console.error('Failed to create soap client: ', err);
    return;
  }

  // 调用webservice方法
  client.methodName({param1: value1, param2: value2}, function(err, result) {
    if (err) {
      console.error('Failed to call webservice method: ', err);
      return;
    }

    // 处理返回结果
    console.log(result);
  });
});

IT老人 2023-02-28 14:51:14 回复

张老师，帮忙看一下这个问题呢！
自定义函数中，为何不能使用 document 获取 DIV 呢

https://bbs.mingdao.net/topic/2552

spray 2023-01-11 16:34:43 回复

(PS:被动 webhook 无难点，不在讲解。参考：Webhook 节点)链接挂了，现在 webhook 这么实现接收 XML 数据包，想跟微信做对接，但是微信有些回调的数据是 XML 格式的，我试了下明道没法解析，

"status": 2,
	"msg": "未解析到数据"

张春泉（Team） 2022-04-01 23:14:09 回复

李凌云 2022-04-01 22:45:52

是优锘科技
不是优诺科技

收到，立马改正

李凌云 2022-04-01 22:45:52 回复

是优锘科技
不是优诺科技

张春泉（Team） 2021-04-12 07:30:45 回复

AO 2021-04-11 23:25:18

我在私有部署的服务器上试了以下代码，它一直提示”代码错误，code 执行错误“：
const response = await fetch('https://api.github.com/users/github');

我感觉试 fetch 这个模块没有安装在我的服务器上，您觉得是不是私有服务其上还得安装 fetch 模块？