React Native 入门(十二) - Fetch 网络请求

前端之家收集整理的这篇文章主要介绍了React Native 入门(十二) - Fetch 网络请求前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

当前 RN 版本:0.50
操作环境:Windows 10

文章同步自简书:http://www.jianshu.com/p/b3c1b4298d18

不知不觉中,RN 0.50 已经发布了。两个多礼拜没有接触 RN 了,已经忘得差不多了,赶紧再恶补一下写写博客,否则真的会忘得一干二净。这篇文章简单介绍 RN 中的网络请求。

使用 Fetch

Fetch 使用起来很简单,只需要简单的一行代码就可以实现网络请求:

fetch(url)

它还可以有第二个可选的参数,用来进行请求的配置。比如指定 header 参数、指定 GET 或 POST 方法、提交表单数据等等。可以参考 Fetch请求文档 来查看所有可用的参数。

var options = {
  method: 'POST',headers: {
    'Accept': 'application/json','Content-Type': 'application/json',},body: JSON.stringify({
    firstParam: 'yourValue',secondParam: 'yourOtherValue',})
};

fetch(url,options);

发起请求之后要对请求到的数据进行处理, Fetch 使用链式调用的方式来进行操作,格式如下:

fetch('https://facebook.github.io/react-native/movies.json')
      .then((response) => { // 获取到网络请求返回的对象 response.json() }) .then((result) => { // 网络请求成功,处理请求到的数据 }) .catch((error) => { // 网络请求失败,处理错误信息 });

你还可以使用 ES7 标准中的 async/await 语法:

// 注意这个方法前面有 async 关键字
  async getMoviesFromApi() {
    try {
      // 注意这里的 await 语句,其所在的函数必须有 async 关键字声明
      let response = await fetch('https://facebook.github.io/react-native/movies.json');
      let result = await response.json();
      return responseJson.movies;
    } catch(error) {
      console.error(error);
    }
  }

Promise 封装

Promise 是专门用来处理异步请求的。由于我对它也不是很熟悉,大家可以在网上查询更多的资料。

我们写个工具类 HttpUtil.js 并在其中利用 Promise 封装 getpost 方法代码参考如下。

export default class HttpUtil {

  /**
   * 利用 Promise 的 get 方式请求
   * @param url
   * @returns {Promise}
   */
  static get(url) {
    return new Promise((resolve,reject) => { fetch(url) .then(response => response.json()) .then(result => resolve(result)) .catch(error => reject(error)) }) } /** * 利用 Promisepost 方式请求 * @param url * @param params * @returns {Promise} */ static post(url,params) { return new Promise((resolve,reject) => { fetch(url,{ method: 'POST',headers: { 'Accept': 'application/json','Content-Type': 'application/json' },body: JSON.stringify(params) }) .then(response => response.json()) .then(result => resolve(result)) .catch(error => reject(error)) }) } }

接下来我们需要进行网络请求的时候就可以直接使用了。

export default class FetchTest extends Component {

  constructor(props) {
    super(props);
    this.state = {
      text: '返回结果'
    }
  }

  get() {
    HttpUtil.get('https://facebook.github.io/react-native/movies.json')
        .then(result => this.setState({text: JSON.stringify(result)}))
        .catch(error => console.error(error))
  }

  post() {
    var data = {username: 'ayuhani',password: '123456'}
    HttpUtil.post('http://rapapi.org/mockjsdata/26411/ayuhani/post',data)
        .then(result => this.setState({text: JSON.stringify(result)}))
        .catch(error => console.error(error))
  }

  render() {
    return <View style={{flex: 1}}>
      <View style={{margin: 16}}>
        <Button
            title={'get'}
            onPress={() => this.get()}
        />
        <Button
            title={'post'}
            onPress={() => this.post()}
        />
        <Text style={{marginTop: 16}}>{this.state.text}</Text>
      </View>
    </View>
  }
}

看一下运行效果

代码确实简洁了不少,当然应该还有更好的封装方法,以后学到了再来分享吧。

原文链接:https://www.f2er.com/react/302283.html

猜你在找的React相关文章