详解React Native网络请求fetch简单封装

在原生应用开发中,为了方便业务开发人员使用,我们一般会对网络库进行一些上传封装,而不是直接使用,例如基于AFNetworking库的iOS请求上层封装,Android的诸如volley,retrofit等。在前端开发中,一般使用fetch进行网络请求,相关介绍请查看fetch示例。其实对于开发来说,系统提供的fetch已经够用了,但是为了代码的整体结构,建议对fetch进行简单的Get/Post封装。

若不封装,我们看一下传统的写法:

 fetch('http://www.pintasty.cn/home/homedynamic', {
      method: 'POST',
      headers: { //header
        'token': 'eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJ1c2VySWQiOiJVLTliZGJhNjBjMjZiMDQwZGJiMTMwYWRhYWVlN2FkYTg2IiwiZXhwaXJhdGlvblRpbWUiOjE0NzUxMTg4ODU4NTd9.ImbjXRFYDNYFPtK2_Q2jffb2rc5DhTZSZopHG_DAuNU'
      },
      body: JSON.stringify({ //参数
        'start': '0',
        'limit': '20',
        'isNeedCategory': true,
        'lastRefreshTime': '2016-09-25 09:45:12'
      })
    })
      .then((response) => response.json()) //把response转为json
      .then((responseData) => { // 上面的转好的json
          alert(responseData); /
        // console.log(responseData);
      })
      .catch((error)=> {
        alert('错误了');
      })
  }

是不是看着有一种密集恐惧症,并且代码的风格也不是很好。所以,为了方便使用,我们需要将公共的部分封装起来,然后只需要通过参数的方式对外暴露出诸如请求Url,请求参数,Header就可以了。

var HTTPUtil = {};

/**
 * GET请求
 */
HTTPUtil.get = function(url, params, headers) {
  if (params) {
    let paramsArray = [];
    //encodeURIComponent
    Object.keys(params).forEach(key => paramsArray.push(key + '=' + params[key]))
    if (url.search(/\?/) === -1) {
      url += '?' + paramsArray.join('&')
    } else {
      url += '&' + paramsArray.join('&')
    }
  }
  return new Promise(function (resolve, reject) {
   fetch(url, {
      method: 'GET',
      headers: headers,
     })
     .then((response) => {
       if (response.ok) {
         return response.json();
       } else {
         reject({status:response.status})
       }
     })
     .then((response) => {
       resolve(response);
     })
     .catch((err)=> {
      reject({status:-1});
     })
  })
}

/**
 * POST请求 FormData 表单数据
 */
HTTPUtil.post = function(url, formData, headers) {
  return new Promise(function (resolve, reject) {
   fetch(url, {
      method: 'POST',
      headers: headers,
      body:formData,
     })
     .then((response) => {
       if (response.ok) {
         return response.json();
       } else {
         reject({status:response.status})
       }
     })
     .then((response) => {
       resolve(response);
     })
     .catch((err)=> {
      reject({status:-1});
     })
  })
}

export default HTTPUtil;

还是上面的例子,我们怎么使用呢?

 let formData = new FormData();
formData.append("id",1060);
 let url='http://www.pintasty.cn/home/homedynamic';
  let headers='';
HTTPUtil.post(url,formData,headers).then((json) => {
  //处理 请求结果
  },(json)=>{
   //TODO 处理请求fail
})

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

(0)

相关推荐

  • react-native fetch的具体使用方法

    在前端快速发展地过程中,为了契合更好的设计模式,产生了 fetch 框架,此文将简要介绍下 fetch 的基本使用. 在 AJAX 时代,进行请求 API 等网络请求都是通过 XMLHttpRequest 或者封装后的框架进行网络请求. 现在产生的 fetch 框架简直就是为了提供更加强大.高效的网络请求而生,虽然在目前会有一点浏览器兼容的问题,但是当我们进行 Hybrid App 开发的时候,如我之前介绍的Ionic 和React Native,都可以使用 fetch 进行完美的网络请求. f

  • 详解React Native网络请求fetch简单封装

    在原生应用开发中,为了方便业务开发人员使用,我们一般会对网络库进行一些上传封装,而不是直接使用,例如基于AFNetworking库的iOS请求上层封装,Android的诸如volley,retrofit等.在前端开发中,一般使用fetch进行网络请求,相关介绍请查看fetch示例.其实对于开发来说,系统提供的fetch已经够用了,但是为了代码的整体结构,建议对fetch进行简单的Get/Post封装. 若不封装,我们看一下传统的写法: fetch('http://www.pintasty.cn/

  • 详解React Native与IOS端之间的交互

    前置准备 首先最好了解一点关于 oc 的语法知识 1.创建声明文件nativeModule.h #import <Foundation/Foundation.h> #import <React/RCTBridgeModule.h> @interface nativeModule : NSObject <RCTBridgeModule> @end 2.创建文件nativeModule.m #import <Foundation/Foundation.h> #i

  • 详解React Native中如何使用自定义的引用路径

    目录 RN的相对路径地狱 RN的自定义路径需要的依赖 解决自定义引用路径导致的eslint报错问题 RN的相对路径地狱 我刚接触RN时,就发现所有的demo中给出来的路径都是相对路径,我自己的练习项目中想改成自定义的绝对路径,但是发现并没有我做前端时熟悉的webpack.config.js,所以也就不知道该怎么改了.伴随着RN的学习和开发练习,我的代码也变得越来越多,越来越复杂,我逐渐发现RN的相对路径越来越麻烦,比如我把某个文件移动到另一个不同深度的文件夹中,那么就需要把所有引用这个文件的地方

  • 详解React Native监听Android回退按键与程序化退出应用

    详解React Native监听Android回退按键与程序化退出应用 前言 我们知道Android回退按键,会控制页面返回, 并且退出应用并非真正意义退出,仍在后台运行,所以在某些场景下需要监控android回退按键,那么在React Native中应该如何应用呢?我们具体来看看. BackAndroid 此模块用于监听硬件的back键操作. 看下具体代码: BackAndroid.addEventListener('hardwareBackPress', function() { if (!

  • 详解React Native项目中启用Hermes引擎

    目录 引言 一.启用 Hermes 引擎 1.1 Android 1.2 iOS 二.Hermes 引擎使用 2.1 检查 Hermes 引擎是否启用 2.2 绑定Hermes 2.3 使用DevTools在Hermes上调试JS 引言 目前,最新版本的React Native(0.70.0及以上版本)已经默认开启了Hermes引擎.而Hermes则是专门针对React Native应用而优化的全新JavaScript引擎,启用Hermes引擎可以优化启动时间,减少内存占用以及空间占用. 一.启

  • 详解React native fetch遇到的坑

    最近在自学react native,学习过程中遇到了不少的坑,下面将针对登录这一功能来详细介绍一下以下遇到的两个问题. 1.在请求数据的时候,一般情况下我们会直接提交Content-type是json数据格式的请求.类似 fetch('https://mywebsite.com/endpoint/', { method: 'POST', headers: { 'Accept': 'application/json', 'Content-Type': 'application/json', },

  • 详解flutter之网络请求dio,请求,拦截器简单示例

    flutter一直很火的网络请求插件dio 直接上代码,写成一个类,可以直接使用 包含请求的封装,拦截器的封装 import 'package:dio/dio.dart'; import 'dart:async'; import 'dart:io'; import './apidomain.dart'; import './httpHeaders.dart'; import 'package:shared_preferences/shared_preferences.dart'; class D

  • 详解React Native 屏幕适配(炒鸡简单的方法)

    前言 React Native 可以开发 ios 和 android 的 app,在开发过程中,势必会遇上屏幕适配(ios 好几种尺寸的屏幕以及 android 各种尺寸的屏幕)的问题,下面介绍一种几行代码搞定 RN 适配的方法! 屏幕适配的前置知识 RN 中的尺寸单位为 dp,而设计稿中的单位为 px 原理 虽然单位不同,但是元素所占屏幕宽度的比例是相同的 利用元素所占屏幕比例不变的特性,来将 px 转为 dp(这样实现屏幕适配的话,在不同尺寸的屏幕下,元素会等比放大或缩小) 公式如下: 设计

  • 详解iOS - ASIHTTPRequest 网络请求

    前言 使用 iOS SDK 中的 HTTP 网络请求 API,相当的复杂,调用很繁琐,ASIHTTPRequest 就是一个对 CFNetwork API 进行了封装,并且使用起来非常简单的一套 API,外号 "HTTP终结者",用 Objective-C 编写,运行效率很高,可以很好的应用在 Mac OS X 系统和 iOS 平台的应用程序中,ASIHTTPRequest 适用于基本的 HTTP 请求,和基于 REST 的服务之间的交互.可惜作者早已停止更新,有一些潜在的 BUG 无

  • 详解React Native开源时间日期选择器组件(react-native-datetime)

    项目介绍 该组件进行封装一个时间日期选择器,同时适配Android.iOS双平台,该组件基于@remobile/react-native-datetime-picker进行开发而来 配置安装 npm install react-native-datetime --save 1.1.iOS环境配置 上面步骤完成之后,直接前台写js代码即可 1.2.Android环境配置 在android/setting.gradle文件中如下配置 ... include ':react-native-dateti

随机推荐