网络请求

与在浏览器中一样,Kraken 下你可以使用 Fetch API 来发起 HTTP 请求,同时为了兼容一些支持旧款浏览器的 JS 库,Kraken 也支持使用 XMLHttpRequest。

对于全双工的通信,WebSocket 是更好的选择,Kraken 支持与 Web 一致的 WebSocket API (非默认能力需注册对应插件)。

与浏览器的差异

需要注意的是,从 Kraken 发起的网络请求不受跨域限制。

简单 HTTP 请求

你可以使用 Fetch API 在 Kraken 中发送 HTTP 请求:

  1. fetch('https://jsonplaceholder.typicode.com/todos/1')
  2. .then(response => response.json())
  3. .then(json => console.log(json));

有时候你需要使用 POST 方式向 HTTP URL 发起请求,可以在 fetch 方法添加第二个可选参数:

  1. const data = {
  2. foo: 'bar',
  3. };
  4. fetch(url, {
  5. body: JSON.stringify(data),
  6. method: 'POST',
  7. })
  8. .then(response => response.json())
  9. .then(json => console.log(json));

更多信息可以参考开发文档

WebSocket

HTTP 的网络通信只能由客户端发起,而 WebSocket 则提供了双向通信的支持。WebSocket 的 API 基于事件通信的模型,在 Kraken 中只要提前加载 WebSocket 插件 就可以使用了。

  1. const ws = new WebSocket('wss://echo.websocket.org');
  2. ws.onopen = function(evt) {
  3. console.log('Connection open ...');
  4. ws.send('Hello WebSockets!');
  5. };
  6. ws.onmessage = function(evt) {
  7. console.log('Received Message: ' + evt.data);
  8. ws.close();
  9. };
  10. ws.onclose = function(evt) {
  11. console.log('Connection closed.');
  12. };

更多细节可以参考 开发文档

使用 XMLHttpRequest

出于兼容性的考虑,XMLHttpRequest 在 Kraken 中也被支持。

以下为使用 XMLHttpRequest 的示例:

  1. const xhr = new XMLHttpRequest();
  2. xhr.addEventListener('load', function(event) {});
  3. xhr.open('GET', 'https://jsonplaceholder.typicode.com/todos/1');
  4. xhr.send();