frontend - 如何在前端调用WebService接口并处理响应数据？

Question

前端怎么调用webService接口？要对接一个接口，对方提供的webService接口，请求信息和返回信息类似这样的，我去查阅了一些资料，webservice主要是指soap协议方式吗
请求信息类似这样的:<Request>
<TradeCode>3014</TradeCode>
<UserID>ZJ053</UserID>
<TerminalID>2074</TerminalID>
<CardTypeCode>02</CardTypeCode>
<PatientCard></PatientCard>
<SecurityNo></SecurityNo>
</Request>
返回信息类似这样的：
<Response><PatientCard>0200035565</PatientCard><PatientID>00035565</PatientID><ResultCode>0</ResultCode></Response>

function callSoapApi() {

const url = 'https://www.example.com/soap-endpoint'; // 替换为实际的SOAP服务URLconst soapRequest = `<soapenv:Envelope xmlns:soapenv="http://schemas.xmlsoap.org/soap/envelope/" xmlns:web="http://www.example.com/webservice">   <soapenv:Header/>   <soapenv:Body>      <web:YourRequest>         <web:Parameter1>value1</web:Parameter1>         <web:Parameter2>value2</web:Parameter2>      </web:YourRequest>   </soapenv:Body></soapenv:Envelope>`;axios.post(url, soapRequest, {    headers: {        'Content-Type': 'text/xml',        'SOAPAction': 'http://www.example.com/soap-action'  // 替换为实际的SOAPAction    }}).then(response => {    console.log('SOAP Response:', response.data);    // 解析XML响应    parseSoapResponse(response.data);}).catch(error => {    console.error('Error calling SOAP API:', error);});

}
这里的url和SOAPAction到底是指什么，还是没搞懂。

Answer 1

在SOAP（Simple Object Access Protocol）协议中，调用WebService接口通常涉及到发送一个包含XML格式数据的SOAP请求到指定的WebService端点（endpoint），然后接收一个包含响应数据的SOAP响应。

对于你提到的url和SOAPAction：

• url：这是WebService的端点（endpoint）URL，即你发送SOAP请求的目标地址。你需要将这个URL替换为实际提供WebService的URL。
• SOAPAction：这是一个可选的HTTP头部字段，用于标识SOAP请求的目标操作。这个值通常是由WebService的提供者提供的，并且应该与你要调用的具体SOAP操作相匹配。某些WebService可能不需要这个头部，或者它可能有一个固定的值。你需要查阅WebService的文档来确定正确的SOAPAction值，并将其替换到代码中。

在你提供的callSoapApi函数中，axios.post用于发送POST请求到指定的url，并将soapRequest作为请求体发送。headers对象指定了请求的内容类型（Content-Type）和SOAPAction。

一旦收到响应，你可以在.then块中处理它。通常，SOAP响应也是一个XML格式的数据，因此你可能需要使用某种方式来解析这个XML数据，比如使用DOM解析器或XML解析库。在你的代码中，parseSoapResponse函数（这个函数在你的代码段中并未给出）应该用于解析SOAP响应。

简而言之，要成功调用WebService接口并处理响应数据，你需要：

1. 知道WebService的端点URL，并将其替换到url变量中。
2. 确定正确的SOAPAction值（如果需要的话），并将其替换到请求头中。
3. 构建一个符合WebService要求的SOAP请求XML，并将其作为请求体发送。
4. 解析SOAP响应XML以获取所需的数据。

请注意，实际调用WebService时，你可能还需要处理身份验证、错误处理、超时等其他情况。此外，如果WebService的提供者提供了SDK或客户端库，使用这些库通常会更简单、更方便。