React-Native之Fetch

• 网络请求是开发过程中比不可少的一个环节。在React-Native中，使用fetch实现网络请求。fetch同XMLHTTPRequest非常类似，是一个封装程度更高的网络API，使用起来更简洁，以为使用了Promise。
• Promise是异步编程的一种解决方案，比传统的解决方案——回调函数和事件——更合理和更强大。ES6将其写进了语言标准，统一了用法，原生提供的Promise对象。简单说就是一个容器，里面保存着某个未来才会结束的事件（通常是一个异步操作）的结果。
• Promise对象代表一个异步操作，有三种状态：Pending（进行中）、Resolved（已完成）、Rejected（以失败）。
• Promise实例生成以后，可以分别指定“完成”和“失败”状态的回调函数。实现方式：链式调用方法。fetch中使用的就是该特性。

语法

fetch(参数)
.then(成功的回调函数)
.catch(失败的回调函数)

fetch(url, opts)
.then((response) => {
  /* 网络请求成功执行该回调函数，得到相应对象，通过response可以获取请求的数据 */
  /* 例如： json、text等等 */
  
  // return response.text();
  return response.json();
})
.then((responseData) => {
  /* 处理请求得到的数据 */

})
.catch((error) => {
  /* 网络请求失败执行该回调函数，得到错误信息 */

})

GET

• 要从任意地址获取内容的话，只需简单地将网址作为参数传递给fetch方法即可（fetch这个词本身也就是获取的意思）：

  fetch('http://japi.juhe.cn/comic/category?key=a56cd810322b659e0d3ccc7d728255d4')
  .then((response) => {
      /*  返回数据格式  */
      return response.json();
  })
  .then((responseData) => {
      /* 请求成功，获取到数据对象responseData  */
  })
  .catch((error) => {
    /* 请求失败 */
    alert(error);
  })
  

POST

• Fetch还有可选的第二个参数，可以用来定制HTTP请求一些参数。你可以指定header参数，或是指定使用POST方法，又或是提交数据等等：

  fetch('http://japi.juhe.cn/comic/category', {
      method:  'POST',
      header: {
          'Accept': 'application/json',
          'Content-Type': 'application/json',  
      },
      body: JSON.stringify({
          key: 'a56cd810322b659e0d3ccc7d728255d4'
      })
  })
  .then((response) => {
      /*  返回数据格式  */
      return response.json();
  })
  .then((responseData) => {
      /* 请求成功，获取到数据对象responseData  */
  })
  .catch((error) => {
    /* 请求失败 */
    alert(error);
  })
  

• 提交数据的格式关键取决于headers中的Content-Type。Content-Type有很多种，对应body的格式也有区别。到底应该采用什么样的Content-Type取决于服务器端，所以请和服务器端的开发人员沟通确定清楚。常用的'Content-Type'除了上面的'application/json'，还有传统的网页表单形式，示例如下：

  fetch('http://japi.juhe.cn/comic/category', {
    method: 'POST',
  headers: {
    'Content-Type': 'application/x-www-form-urlencoded',
  },
    body: 'key=a56cd810322b659e0d3ccc7d728255d4'
  })