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

前往学习