网络请求
fetch
- 发起请求
- 处理返回值
WebSocket
- 方法
  - constructor
  - close
  - send
- 属性
  - readyState
  - url
  - onopen
  - onclose
  - onmessage
  - onerror
- 范例
Cookie

网络请求

Hippy 直接支持 W3C 标准的 fetch 和 WebSocket 接口，可以通过这两个方法对服务器进行访问。

fetch

Hippy 提供了跟 W3C 标准基本一致的 fetch 方法，可以直接参考 MDN。

注意：fetch 目前仅支持 JSON 对象的传输，别的格式暂时无法支持。

发起请求

如果需要请求远程地址，只需要在 fetch 函数参数值传入地址即可，如下： 1. fetch('//mywebsite.com/mydata.json');

fetch 函数也支持 HTTP 请求的配置。 1. fetch('//mywebsite.com/endpoint/', { 2. method: 'POST', 3. headers: { 4. Accept: 'application/json', 5. 'Content-Type': 'application/json', 6. }, 7. body: JSON.stringify({ 8. firstParam: 'yourValue', 9. secondParam: 'yourOtherValue', 10. }), 11. });

完整的 fetch 请求属性列表可以点击此处查看。

处理返回值

返回数据将以 Promise 的形式返回，示例如下： 1. function getMoviesFromApi() { 2. return fetch('//mywebsite.com/demo.json') 3. .then(rsp => rsp.json()) 4. .then(json => json.movies) 5. .catch(error => console.error(error)); 6. }

可以使用 async/await 处理 fetch 返回的数据。

在使用 fetch 发起网络请求的时候，需要记得捕获错误，否则错误会被静默丢弃。 1. async function getMoviesFromApi() { 2. try { 3. const rsp = await fetch('//mywebsite.com/demo.json'); 4. const json = await rsp.json(); 5. return responseJson.movies; 6. } catch (error) { 7. console.error(error); 8. } 9. }

WebSocket

WebSocket 协议可以在单个TCP连接上提供全双工的通信信道，是一种长连接的网络通道。

方法

constructor

(url: string, protocals: array, extrasHeaders: object) 创建一个 WebSocket 对象，并开始向指定的 url 建立 Websocket 连接

url: string - WebSocket 的连接地址，以 ws:// 或 wss:// 开头的 url；

protocals: array - 可选字段，指定WebSocket希望采用的交流协议，array 内部的单个元素为必须为字符串类型，按优先级排序，该字段会最终组装到 WebSocket 的 Sec-WebSocket-Protocol 请求头中；

extrasHeaders: object- 可选字段，指定建立 WebSocket 时的一些额外请求头；

close

(code: number, reason: string) 主动关闭一条WebSocket，并向对端返回指定的code和reason

code: number - 可选字段，WebSocket关闭时，返回给对端的状态码；

reason: string- 可选字段，WebSocket关闭时，返回给对端的原因描述字符串；

send

(data: string) 向对端发送一段数据，现阶段hippy仅支持发送文本数据，注意，请在明确收到 onopen 事件后才能真正发送数据，在连接尚未建立或已关闭的情况下发送数据会导致错误；

data: string- 向WebSocket对端发送的字符串数据；

属性

readyState

number，只读属性

当前WebSocket的状态，取值为以下4种： * 0 - WebSocket正在连接中（Connecting）； * 1 - WebSocket连接建立成功，当前可以收发数据（Open）； * 2 - WebSocket连接正在关闭（Closing）； * 3 - WebSocket连接已关闭（Closed）；

url

string，只读属性 当前 WebSocket 使用的 url

onopen

function，只写属性 设置当前 WebSocket 在连接建立成功后的回调函数

onclose

function，只写属性 设置当前WebSocket在连接关闭时的回调函数，回调函数带有一个参数（Object类型），参数属性说明如下：

code - number，连接关闭的状态码；

reason - string，连接关闭的原因描述；

onmessage

function，只写属性 设置当前 WebSocket 在收到数据时的回调函数，回调函数带有一个参数（Object类型），参数属性说明如下：

data - string，实际收到的数据，由于当前Hippy WebSocket仅支持字符串数据的收发，这里一定为string类型；

type - string，收到的数据的类型，当前恒定为‘text’；

onerror

function，只写属性 设置当前 WebSocket 在连接出现错误时的回调函数，回调函数带有一个参数（Object类型），参数属性说明如下：

reason - string，连接出现错误的的原因描述；

范例

  1. import React from "react";
    2. import { View } from "@hippy/react";
    3.   4. export default class WebSocketExpo extends React.Component {
    5.   componentWillMount() {
    6.     this.webSocekt = new WebSocket("ws://websocket.test.qq.com/websocket");
    7.     this.webSocekt.onopen = () => {
    8.       this._webSocketOpened = true;
    9.       console.log("WebSocket onOpen");
    10.       this.webSocekt.send("Hello WebSocket")
    11.     };
    12.   13.     this.webSocekt.onclose = (param) => {
    14.       this._webSocketOpened = false;
    15.       console.log("WebSocket onClose: code = " + param.code + ", reason = " + param.reason);
    16.     };
    17.   18.     this.webSocekt.onerror = (param) => {
    19.       console.log("WebSocket onError: reason = " + param.reason);
    20.     };
    21.   22.     this.webSocekt.onmessage = (message) => {
    23.       console.log("WebSocket onMessage: data type = " + message.type);
    24.   25.       // text 类型的回包数据
    26.       if (message.type == 'text') {
    27.         console.log("WebSocket onMessage: data type = " + message.data);
    28.       }
    29.     };
    30.   }
    31.   32.   componentWillUnmount() {
    33.     // close 宜可不带参数 this.webSocekt.close();
    34.     this.webSocekt && this.webSocekt.close(0, "close websocket");
    35.   }
    36.   37.   onClick() {
    38.       this._webSocketOpened && this.webSocekt && this.webSocekt.send("Hello, WebSocket!");
    39.   }
    40.   41.   render() {
    42.     return (
    43.       <View onClick={this.onClick.bind(this)}></View>
    44.     );
    45.   }
    46. };

Hippy 在接收来自服务器的 set-cookie header 时，会自动种入 cookie，下次再请求同域名服务时，就自动带上之前种下的 cookie。但和浏览器不同，Hippy 内提供提供了 NetworkModule 提供了对 cookie 读取和修改，详情可以参考 hippy-react 的 NetworkModule，或者 hippy-vue 的 Vue.Native.Cookie 文档。

浏览器中对 Cookie 的读写时通过 document 对象操作的，但是 Hippy 中暂时不能直接出现全局的 document，否则部分库会运行一些在浏览器中才有的 document 方法，但 Hippy 中并没有，会导致崩溃。