React Native 网络请求封装:使用Promise封装fetch请求

React Native中虽然也内置了XMLHttpRequest 网络请求API(也就是俗称的ajax),但XMLHttpRequest 是一个设计粗糙的 API,不符合职责分离的原则,配置和调用方式非常混乱,而且基于事件的异步模型写起来也没有现代的 Promise 友好。而Fetch 的出现就是为了解决 XHR 的问题,所以ReactNative官方推荐使用Fetch API。http://blog.csdn.net/withings/article/details/71331726

fetch请求示例如下:

1 return fetch(‘http://facebook.github.io/react-native/movies.json‘)
2     .then((response) => response.json())
3     .then((responseJson) => {
4       return responseJson.movies;
5     })
6     .catch((error) => {
7       console.error(error);
8     });

Fetch API的详细介绍及使用说明请参考如下文章:

  • React Native 网络请求官方文档
  • 深入浅出Fetch API
  • 传统 Ajax 已死,Fetch 永生
  • 【翻译】这个API很“迷人”——(新的Fetch API)
  • 使用Promise封装fetch请求

    由于在项目中很多地方都需要用到网络请求,为了使用上的方便,使用ES6的Promise来封装fetch网络请求,代码如下:

  •  1 let common_url = ‘http://192.168.1.1:8080/‘;  //服务器地址
     2 let token = ‘‘;
     3 /**
     4  * @param {string} url 接口地址
     5  * @param {string} method 请求方法:GET、POST,只能大写
     6  * @param {JSON} [params=‘‘] body的请求参数,默认为空
     7  * @return 返回Promise
     8  */
     9 function fetchRequest(url, method, params = ‘‘){
    10     let header = {
    11         "Content-Type": "application/json;charset=UTF-8",
    12         "accesstoken":token  //用户登陆后返回的token,某些涉及用户数据的接口需要在header中加上token
    13     };
    14     console.log(‘request url:‘,url,params);  //打印请求参数
    15     if(params == ‘‘){   //如果网络请求中带有参数
    16         return new Promise(function (resolve, reject) {
    17             fetch(common_url + url, {
    18                 method: method,
    19                 headers: header
    20             }).then((response) => response.json())
    21                 .then((responseData) => {
    22                     console.log(‘res:‘,url,responseData);  //网络请求成功返回的数据
    23                     resolve(responseData);
    24                 })
    25                 .catch( (err) => {
    26                     console.log(‘err:‘,url, err);     //网络请求失败返回的数据
    27                     reject(err);
    28                 });
    29         });
    30     }else{   //如果网络请求中没有参数
    31         return new Promise(function (resolve, reject) {
    32             fetch(common_url + url, {
    33                 method: method,
    34                 headers: header,
    35                 body:JSON.stringify(params)   //body参数,通常需要转换成字符串后服务器才能解析
    36             }).then((response) => response.json())
    37                 .then((responseData) => {
    38                     console.log(‘res:‘,url, responseData);   //网络请求成功返回的数据
    39                     resolve(responseData);
    40                 })
    41                 .catch( (err) => {
    42                     console.log(‘err:‘,url, err);   //网络请求失败返回的数据
    43                     reject(err);
    44                 });
    45         });
    46     }
    47 }

    使用fetch请求,如果服务器返回的中文出现了乱码,则可以在服务器端设置如下代码解决: 
    produces="text/html;charset=UTF-8"

    fetchRequest使用如下:

      • GET请求:
  •  1 fetchRequest(‘app/book‘,‘GET‘)
     2     .then( res=>{
     3         //请求成功
     4         if(res.header.statusCode == ‘success‘){
     5             //这里设定服务器返回的header中statusCode为success时数据返回成功
     6
     7         }else{
     8             //服务器返回异常,设定服务器返回的异常信息保存在 header.msgArray[0].desc
     9             console.log(res.header.msgArray[0].desc);
    10         }
    11     }).catch( err=>{
    12         //请求失败
    13     })
  • POST请求:
  •  1 let params = {
     2     username:‘admin‘,
     3     password:‘123456‘
     4 }
     5 fetchRequest(‘app/signin‘,‘POST‘,params)
     6     .then( res=>{
     7         //请求成功
     8         if(res.header.statusCode == ‘success‘){
     9             //这里设定服务器返回的header中statusCode为success时数据返回成功
    10
    11         }else{
    12             //服务器返回异常,设定服务器返回的异常信息保存在 header.msgArray[0].desc
    13             console.log(res.header.msgArray[0].desc);
    14         }
    15     }).catch( err=>{
    16         //请求失败
    17     })

    fetch超时处理

    由于原生的Fetch API 并不支持timeout属性,如果项目中需要控制fetch请求的超时时间,可以对fetch请求进一步封装实现timeout功能,代码如下:

    fetchRequest超时处理封装

  •  1 /**
     2  * 让fetch也可以timeout
     3  *  timeout不是请求连接超时的含义,它表示请求的response时间,包括请求的连接、服务器处理及服务器响应回来的时间
     4  * fetch的timeout即使超时发生了,本次请求也不会被abort丢弃掉,它在后台仍然会发送到服务器端,只是本次请求的响应内容被丢弃而已
     5  * @param {Promise} fetch_promise    fetch请求返回的Promise
     6  * @param {number} [timeout=10000]   单位:毫秒,这里设置默认超时时间为10秒
     7  * @return 返回Promise
     8  */
     9 function timeout_fetch(fetch_promise,timeout = 10000) {
    10     let timeout_fn = null;
    11
    12     //这是一个可以被reject的promise
    13     let timeout_promise = new Promise(function(resolve, reject) {
    14         timeout_fn = function() {
    15             reject(‘timeout promise‘);
    16         };
    17     });
    18
    19     //这里使用Promise.race,以最快 resolve 或 reject 的结果来传入后续绑定的回调
    20     let abortable_promise = Promise.race([
    21         fetch_promise,
    22         timeout_promise
    23     ]);
    24
    25     setTimeout(function() {
    26         timeout_fn();
    27     }, timeout);
    28
    29     return abortable_promise ;
    30 }
    31
    32 let common_url = ‘http://192.168.1.1:8080/‘;  //服务器地址
    33 let token = ‘‘;
    34 /**
    35  * @param {string} url 接口地址
    36  * @param {string} method 请求方法:GET、POST,只能大写
    37  * @param {JSON} [params=‘‘] body的请求参数,默认为空
    38  * @return 返回Promise
    39  */
    40 function fetchRequest(url, method, params = ‘‘){
    41     let header = {
    42         "Content-Type": "application/json;charset=UTF-8",
    43         "accesstoken":token  //用户登陆后返回的token,某些涉及用户数据的接口需要在header中加上token
    44     };
    45     console.log(‘request url:‘,url,params);  //打印请求参数
    46     if(params == ‘‘){   //如果网络请求中带有参数
    47         return new Promise(function (resolve, reject) {
    48             timeout_fetch(fetch(common_url + url, {
    49                 method: method,
    50                 headers: header
    51             })).then((response) => response.json())
    52                 .then((responseData) => {
    53                     console.log(‘res:‘,url,responseData);  //网络请求成功返回的数据
    54                     resolve(responseData);
    55                 })
    56                 .catch( (err) => {
    57                     console.log(‘err:‘,url, err);     //网络请求失败返回的数据
    58                     reject(err);
    59                 });
    60         });
    61     }else{   //如果网络请求中没有参数
    62         return new Promise(function (resolve, reject) {
    63             timeout_fetch(fetch(common_url + url, {
    64                 method: method,
    65                 headers: header,
    66                 body:JSON.stringify(params)   //body参数,通常需要转换成字符串后服务器才能解析
    67             })).then((response) => response.json())
    68                 .then((responseData) => {
    69                     console.log(‘res:‘,url, responseData);   //网络请求成功返回的数据
    70                     resolve(responseData);
    71                 })
    72                 .catch( (err) => {
    73                     console.log(‘err:‘,url, err);   //网络请求失败返回的数据
    74                     reject(err);
    75                 });
    76         });
    77     }
    78 }

    加入超时处理的fetchRequest网络请求的使用方法跟没加入超时处理一样。 
    对于fetch网络请求的超时处理的封装参考下面这篇文章而写:

    让fetch也可以timeout

原文地址:https://www.cnblogs.com/jinzhengping/p/9252275.html

时间: 2024-10-16 08:05:29

React Native 网络请求封装:使用Promise封装fetch请求的相关文章

react native 网络get请求方式参数不可为undefined或null

react native 网络get请求方式参数不可为undefined(为空的话默认变为)或null 错误写法: export function addToCartAction(isRefreshing, loading, spId, number, spfId = null, pgId = null) { console.warn('==>',spId+":"+number); return (isRefreshing || loading) ? {types: [FETCH

React Native网络编程之Fetch

目录 1.前言 2.什么是Fetch 3.最简单的应用 4.支持的请求参数 - 4.1. 参数详讲 - 4.2. 示例 5.请求错误与异常处理 ? 1. 前言 ? 网络请求是开发APP中不可或缺的一部分,比如最基本的获取用户订单数据/获取商品数据/提交表单到服务器等等都离不开网络请求,那么在RN中是如何进行网络请求的呢? ? 2. 什么是Fetch ? Fetch API提供了一个JS接口,用于进行网络操作,例如请求和响应.它还提供了一个全局fetch方法,该方法提供了一种简单,合理的方式来跨网

React Native 网络请求

如下面的Code,分别介绍了GET,POST,以及使用XMLHttpRequest的Get请求. import React, { Component } from 'react'; import { AppRegistry, StyleSheet, Text, View, Image, TouchableOpacity, TouchableHighlight, ToastAndroid, Alert, } from 'react-native'; var BASE_URL = 'https://

React Native之Fetch简单封装、获取网络状态

1.Fetch的使用 fetch的使用非常简单,只需传入请求的url fetch('https://facebook.github.io/react-native/movies.json'); 当然是否请求成功与数据的处理,我们还需处理成功与失败的回调 function getMoviesFromApiAsync() { return fetch('https://facebook.github.io/react-native/movies.json') .then((response) =>

react native中如何往服务器上传网络图片

1 let common_url = 'http://192.168.1.1:8080/'; //服务器地址 2 let token = ''; //用户登陆后返回的token 3 /** 4 * 使用fetch实现图片上传 5 * @param {string} url 接口地址 6 * @param {JSON} params body的请求参数 7 * @return 返回Promise 8 */ 9 function uploadImage(url,params){ 10 return

React Native专题-江清清

本React Native讲解专题:主要讲解了React Native开发,由基础环境搭建配置入门,基础,进阶相关讲解. 刚创建的React Native交流8群:533435865  欢迎各位大牛,React Native技术爱好者加入交流!同时博客右侧欢迎微信扫描关注订阅号,移动技术干货,精彩文章技术推送! 关于React Native各种疑难杂症,问题深坑总结方案请点击查看: Mac和Windows安装搭建React Native环境教程如下: Mac OS X版本:Mac OS X安装R

Android React Native使用原生模块

有时候我们的App需要访问平台API,并且React Native可能还没有相应的模块包装:或者你需要复用一些Java代码,而不是用Javascript重新实现一遍:又或者你需要实现某些高性能的.多线程的代码,譬如图片处理.数据库.或者各种高级扩展等等. 而用React Native可以在它的基础上编写真正原生的代码,并且可以访问平台所有的能力.如果React Native还不支持某个你需要的原生特性,你应当可以自己实现该特性的封装. 不过在开始编写代码使用原生模块前,有一个知识点需要掌握,免得

React Native 从零到高级- 0基础学习路线

React Native QQ交流群(美团,饿了么,阿里的大神都在里面):576089067 React Native  从0 基础到高级 视频教程正在重录中,要了解最新进度可以关注菜鸟窝微信公众号(下图),旧版视频教程可以点击这里在线学习 学习路线(文章版),江清清老师出品,点击这里关注江清清 ,同时可以关注一下他的课程 基础入门:1.React Native For Android环境配置以及第一个实例2.React Native开发IDE安装及配置3.React Native应用设备运行(

React Native专题

刚创建的React Native技术交流1群(282693535),React Native技术交流2群(496601483),React Native技术交流3群(496508742).欢迎各位大牛,React Native技术爱好者加入交流!同时博客右侧欢迎微信扫描关注订阅号,移动技术干货,精彩文章技术推送! 关于React Native各种疑难杂症,问题深坑总结方案请点击查看: Mac和Windows安装搭建React Native环境教程如下: Mac OS X版本:Mac OS X安装