使用 fetch 我们可以去向服务端请求一些数据 .. 这里可以用一个 douban 的 api … 先用 Postman 试一下 … 请求的地址是 https://api.douban.com/v2/movie/top250 ..

方法是 Get .. 点击 Send .. 这里返回的是 douban 上排名前 250 位的电影内容 .. 在 subjects 这个属性里面，包含的就是电影相关的内容 ..

回到编辑器 .. 先去定义一个恒量保存一下要用 fetch 请求的地址 .. 名字可以是 REQUEST_URL … 它的值就是 douban api 提供的地址 ..

在这个 React 组件里，去掉这个手工创建的 movies ，我们可以使用 fetch 去获取到数据 … movies 这个状态的初始值可以设置成 new ListView … 一会儿获取到数据以后可以使用 setState 去设置一下 movies 这个状态 .. 而且可以使用它里面的 cloneWithRows 去处理请求回来的数据 ..

先在这个组件里面定义一个方法 .. 名字可以是 fetchData .. 在这个方法里面，用一下 fetch … 把上面定义的 douban api 的地址交给这个函数 ..

它会返回 Promise .. 所以可以使用 then 去处理一下返回来的东西 . . 给返回来的数据起个名字 … 可以是 response … 用一个箭头函数 .. 右边 使用 response 的 json() 方法 ..

接着再用一个 then … 去处理一下数据 … 这个数据可以叫它 responseData … 我们可以在这里去设置一下组件的 movies 这个状态 … 先在控制台上看一下这个 responseData 里的东西 ..

在设备模拟器上，按一下 command + D ，打开开发菜单 … 选择 Debug on Chrome … 再打开浏览器的控制台 ..

我们还得去执行一下 fetchData .. 回到编辑器 .. 在这个 constructor 里面， 添加一个 this.fetchData() ..

回到开发者工具 ..

你会看到 responseData 里的东西 … 打开看一下 .. 在这个 subjects 属性里面，就是一些电影内容 ... 我们可以把 movies 状态的值，设置成这个 subjects 属性的值 ..

回到编辑器 .. 在这个 then 里面，用 this.setState 设置一下 movies 这个状态 .. 设置成 this.state.movies .. 使用它的 cloneWithRows 方法，处理一下 responseData 的 subjects 这个属性的值 … 它里面就是电影数据 ..

this.state.movies.cloneWithRows(responseData.subjects)

完成请求，最后再用一个 done() …

保存.. 稍等一下 … 在屏幕上会显示一些电影的标题 … 这些内容就是从 douban api 那里请求回来的数据 ..