Fetchデータ要求の使用

FetchはPromiseベースなので、古いブラウザではPromiseはサポートされていませんが、
Fetchの利点は主に以下の通りである.
文法は簡潔で、より意味化は標準Promiseに基づいて実現され、async/await同構造をサポートし、isomorphic-fetchを使用する.
きほんかきこみこうぞう

fetch(url).then(function(response) {
 return response.json();
}).then(function(data) { 
 console.log(data);
}).catch(function(e) { 
 console.log("Oops, error");
});

Es 6矢印の書き方:

fetch(url).then(response => response.json()) 
  .then(data => console.log(data)) 
  .catch(e => console.log("Oops, error", e))

サポートと互換性:
IE 8はES 3なので、ES 5を導入するpolyfill:es 5-shim、es 5-sham Promiseを導入するpolyfill:es 6-promise fetchプローブライブラリを導入する必要があります:fetch-detector fetchを導入するpolyfill:fetch-ie 8オプション:jsonpも使用している場合はfetch-jsonpを導入オプション:Babelのruntimeモードをオンにし、async/awaitを使用します
Fetch polyfillの基本原理はwindowが存在するかどうかを検出することである.Fetchメソッドは,なければXHRで実現する.これもgithub/fetchのやり方で、しかし、一部のブラウザ(Chrome 45)は元のままFetchをサポートしているが、応答に中国語があると文字化けしてしまい、外国人はこのような問題にあまり関心を持っていないので、私自身はfetch-detectorとfetch-ie 8をカプセル化し、ブラウザが安定してFetchをサポートしている場合にのみ元のFetchを使用している.これらのライブラリは現在、毎日数千万個のリクエストが使用されており、絶対に頼りになる!
Fetch共通ピット
Fetchリクエストはデフォルトではクッキーを持たないので、fetch(url,{credentials:'include'})サーバが400500エラーコードを返すとrejectされず、ネットワークエラーでリクエストが完了できない場合にのみfetchがrejectされます.
簡単な例です

//             

import React, { Component } from 'react';
import {
  Text,
  View,
  Image,
  ListView,
  ActivityIndicator,
  TouchableHighlight
} from 'react-native';

import styles from '../Styles/Main';
import MovieDetail from './MovieDetail';

class MovieList extends Component {
  constructor(props) {
    super(props);

    this.state = {
      movies: [],
      loaded: false,
      count: 20,
      start: 0,
      total: 0,
    };

    this.dataSource = new ListView.DataSource({
      rowHasChanged: (row1, row2) => row1 !== row2
    });

    this.REQUEST_URL = 'https://api.douban.com/v2/movie/top250';

    this.fetchData();

  }

  requestURL(
    url = this.REQUEST_URL,
    count = this.state.count,
    start = this.state.start
  ) {
    return (
      `${url}?count=${count}&start=${start}`
    );
  }

  fetchData() {
    fetch(this.requestURL())
      .then(response => response.json())
      .then(responseData => {
        let newStart = responseData.start + responseData.count;
        this.setState({
          movies: responseData.subjects,
          loaded: true,
          total: responseData.total,
          start: newStart,
        });
      })
      .done();
  }

  showMovieDetail(movie) {
    this.props.navigator.push({
      title: movie.title,
      component: MovieDetail,
      passProps: {movie},
    });
  }

  renderMovieList(movie) {
    return (
       this.showMovieDetail(movie)}
      >
        
          
            
          
          
            {movie.title}
            
              {movie.original_title} ( {movie.year} )
            
            
              {movie.rating.average}
            
          
        
      
    );
  }

  loadMore() {
    fetch(this.requestURL())
      .then(response => response.json())
      .then(responseData => {
        let newStart = responseData.start + responseData.count;
        this.setState({
          movies: [...this.state.movies, ...responseData.subjects],
          start: newStart
        });
      })
      .done();
  }

  onEndReached() {
    console.log(
      `   ！  ：${this.state.start}，  ：${this.state.total}`
    );

    if (this.state.total > this.state.start) {
      this.loadMore();
    }
  }

  renderFooter() {
    if (this.state.total > this.state.start) {
      return (
        
          
        
      );
    } else {
      return (
        
                    ：）
        
      );
    }
  }

  render() {
    if (!this.state.loaded) {
      return (
        
          
            
          
        
      );
    }
    return (
      
        
      
    );
  }
}

export { MovieList as default };