(???)011_ReactNative: Networking

(问渠那得清如许，为有源头活水来。 双手奉上RN官网)

Networking: 网络交互

• 使用Fetch

①发起请求

fetch('https://mywebsite.com/endpoint/', {
  //请求方式
  method: 'POST',
  //指定一些请求头信息
  headers: {
    'Accept': 'application/json',
    'Content-Type': 'application/json',
  },
  //指定一些请求体信息
  body: JSON.stringify({
    firstParam: 'yourValue',
    secondParam: 'yourOtherValue',
  })
})

②处理响应:默认异步网络操作,不要忘了捕获处理异常,否则静默丢掉

function getMoviesFromApiAsync() {
    return fetch('https://facebook.github.io/react-native/movies.json')
      .then((response) => response.json())
      .then((responseJson) => {
        return responseJson.movies;
      })
      .catch((error) => {
        console.error(error);
      });
  }

或者使用ES2017 async/await 语法

 async function getMoviesFromApi() {
    try {
      let response = await fetch('https://facebook.github.io/react-native/movies.json');
      let responseJson = await response.json();
      return responseJson.movies;
    } catch(error) {
      console.error(error);
    }
  }

• 内置XMLHttpRequest API,从而可以直接使用它或者基于它的第三方库

var request = new XMLHttpRequest();
request.onreadystatechange = (e) => {
  if (request.readyState !== 4) {
    return;
  }

  if (request.status === 200) {
    console.log('success', request.responseText);
  } else {
    console.warn('error');
  }
};

request.open('GET', 'https://mywebsite.com/endpoint/');
request.send();

• 支持WebSocket

var ws = new WebSocket('ws://host.com/path');

ws.onopen = () => {
  // connection opened

  ws.send('something'); // send a message
};

ws.onmessage = (e) => {
  // a message was received
  console.log(e.data);
};

ws.onerror = (e) => {
  // an error occurred
  console.log(e.message);
};

ws.onclose = (e) => {
  // connection closed
  console.log(e.code, e.reason);
};