ReactNative从零到完整项目-如何使用Fetch（网络篇）

项目连接： 93Laer/MyDemo
ReactNative使用手册

发起网络请求

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

fetch('https://mywebsite.com/mydata.json')

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

fetch('https://mywebsite.com/endpoint/', {
  method: 'POST',
  headers: {
    'Accept': 'application/json',
    'Content-Type': 'application/json',
  },
  body: JSON.stringify({
    firstParam: 'yourValue',
    secondParam: 'yourOtherValue',
  })
})

译注：如果你的服务器无法识别上面POST的数据格式，那么可以尝试传统的form格式，示例如下：

fetch('https://mywebsite.com/endpoint/', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/x-www-form-urlencoded',
  },
  body: 'key1=value1&key2=value2'
})

注意：由于我们的网络请求有可能出错，但是不加catch是看不到的，所以基本固定写法都会加一个catch操作

.catch(error) {
      console.error(error);
    }

完整网络请求示例：

    getData = ()=> {
        //请求网络
        fetch(`https://api.github.com/search/repositories?q=Android&sort=stars`)
            .then(response=>response.json())
            .then(json=> {
                //打印请求结果
                console.error(json);
            })
            .catch((error)=> {
                console.error(error);
            })
            .done()
    }

注意：由于我们的网络请求只执行了一次，我们应该在什么时候进行网络请求了，类似与安卓在fragment中需要请求数据一样，这时候就要用到了RN的生命周期了。

生命周期

我这里网络请求放在了componentWillMount（）请求，因为它执行在render（）之前，且只执行一次。
then关键字：类似于RxJava中的“map()”，其实就是对结果做一定的操作

题外话：用了RN的网络请求，感觉很简洁，很爽的样子，当然也还有一些其他的框架(其他框架使用点击官网），这里只看官方推荐这个，安卓网络框架太多，写起来也各有各的麻烦

小练习：写一个简单的页面，从网络请求数据，然后展示到ListView中，代码在我的项目中都有，可以找到注释的代码直接运行项目

效果图.gif

喜欢请点赞，或是关注，后续将完善发布更多的文章，你的鼓励就是我的动力（程序员最大的动力莫过于同行的鼓励）