RN Fetch使用及简单封装

什么是Fetch

Fetch API提供了一个用于获取资源(包括通过网络)的接口。对于任何使用过XMLHttpRequest的人来说,这看起来都很熟悉,但是新的API提供了更强大、更灵活的特性集。—来自《Fetch API

Fetch 方法会返回一个Promise,这种模式可以简化异步风格代码。

Fetch使用

  1. 发起请求

    fetch(url)

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

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

    //定义请求选项
    const requstOption={
        //请求方式
        method: 'POST',
        //请求头
        headers:{
           'Accept': 'application/json',
            //取决于服务器端,所以请和服务器端的开发人员沟通确定清楚
           'Content-Type': 'application/json',  
        },
        //请求体(GET方式无需设置)
        body: JSON.stringify({
            'firstParam': 'yourValue',
            'secondParam': 'yourOtherValue',
        }),
    }
    //发起请求
    fetch('https://mywebsite.com/endpoint/',requstOption);
    
  2. 响应请求

    通过Fetch发送请求后我们可以接受返回的数据做进一步的处理

    function getMoviesFromApiAsync() {
      return fetch('https://facebook.github.io/react-native/movies.json')
        /**
         *数据解析方式(根据返回类型决定)
         *response.text()——>文本格式
         *response.json()——>json串格式
         */
        .then((response) => response.json())
        //渠道解析后的数据
        .then((responseJson) => {
          return responseJson.movies;
        })
        //异常
        .catch((error) => {
          console.error(error);
        });
    }
    

    也可以使用ES8标准中的async/await语法

    • async用于定义一个异步函数,该函数返回一个Promise。
    • await 操作符用于等待一个Promise 对象。它只能在异步函数 async function 中使用。
    // 注意这个方法前面有async关键字
    async function getMoviesFromApi() {
      try {
        // 注意这里的await语句,其所在的函数必须有async关键字声明
        let response = await fetch(
          'https://facebook.github.io/react-native/movies.json',
        );
        let responseJson = await response.json();
        return responseJson.movies;
      } catch (error) {
        console.error(error);
      }
    }
    

Fetch封装

  1. 我们将Fetch网络请求封装成一个共同的文件

    //NetWork.js
    
    /**
     * Get请求
     * @param url:请求地址
     * @returns {Promise<any> | Promise<*>}
     */
    const fetchGet = function getTest(url) {
        //发起请求,返回给调用者一个Promise对象
        return new Promise(function (resolve, reject) {
            fetch(url)
                .then((response) => response.json())
                .then((responseData) => {
                    //后渠道解析后的数据
                    console.log('responseData= ' + JSON.stringify(responseData));
                    //通过Promise机制的resolve函数返回正常状态
                    resolve(responseData);
                })
                .catch((error) => {
                    AlertDialog('提示', error.message);
                    //通过Promise机制的reject函数返回catch
                    reject(error);
                });
        });
    };
    export {fetchGet};
    
  2. 使用

    //1. 导入该函数文件
    import {fetchGet} from '../../NetWork';
    
    //2. 调用
    fetchGet(testUrl, 'zcmain')
            .then((response) => {
                 console.log('函数调用返回成功' + JSON.stringify(response));
             })
             .catch((error) => {
                 console.log('函数调用返回异常');
            });
    

扩展

1. ES6 Promise介绍

前往学习

2. 理解ES7 async/awiat

前往学习

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值