1.到这里,相信各位对 React-Native 有所熟悉了吧,从现在开始我们要慢慢往实际的方向走,这边就先从网络请求这部分开始,在正式开发中,网络请求一般都单独作为一部分,我们在需要使用的地方只需要简单调用一下即可,这样做的好处是让整个 工程 的结构更加清晰,让组件们各司其职,只管好自己该管的事,并且后期维护成本也会相应降低。

首先,我们要先对 fetch 的 GET 和 POST 请求方式进行一层基础封装,也就是要把它们单独独立出来,那么这边先来看下 GET 这边:

HTTPBase.js

/**
* GET 网络请求封装
*/ var HTTPBase = {}; /**
*
* GET请求
*
* @param url
* @param params {}包装
* @param headers
*
* @return {Promise} 返回一个Promise对象
*
* */
HTTPBase.get = function (url, params, headers) { // 参数
if (params) { let paramsArray = []; // 获取 params 内所有的 key
let paramsKeyArray = Object.keys(params);
// 通过 forEach 方法拿到数组中每个元素,将元素与参数的值进行拼接处理,并且放入 paramsArray 中
paramsKeyArray.forEach(key => paramsArray.push(key + '=' + params[key])); // 网址拼接
if (url.search(/\?/) === -1) {
url += '?' + paramsArray.join('&');
}else {
url += paramsArray.join('&');
}
} // 向外部,返回一个Promise对象
return new Promise(function (resolve, reject) {
fetch(url, {
method:'GET',
headers:headers
})
.then((response) => response.json())
.then((response) => {
resolve(response);
})
.catch((error) => {
reject({status:-1})
})
.done();
})
} module.exports = HTTPBase;

调用

// 网络请求
fetchData(resolve) {
HTTPBase.get('http://guangdiu.com/api/gethots.php')
.then((responseData) => {
this.setState({
dataSource: this.state.dataSource.cloneWithRows(responseData.data),
loaded:true,
});
if (resolve !== undefined){
setTimeout(() => {
resolve(); // 关闭动画
}, 1000);
}
})
.catch((error) => { })
}

.

React-Native 之 GD (八)GET 网络请求封装的更多相关文章

  1. android翻译应用、地图轨迹、视频广告、React Native知乎日报、网络请求框架等源码

    Android精选源码 android实现高德地图轨迹效果源码 使用React Native(Android和iOS)实现的 知乎日报效果源码 一款整合百度翻译api跟有道翻译api的翻译君 RxEa ...

  2. 使用react native制作的一款网络音乐播放器

    使用react native制作的一款网络音乐播放器 基于第三方库 react-native-video设计"react-native-video": "^1.0.0&q ...

  3. flutter dio网络请求封装实现

    flutter dio网络请求封装实现 文章友情链接:   https://juejin.im/post/6844904098643312648 在Flutter项目中使用网络请求的方式大致可分为两种 ...

  4. 十. Axios网络请求封装

    1. 网络模块的选择 Vue中发送网络请求有非常多的方式,那么在开发中如何选择呢? 选择一:传统的Ajax是基于XMLHttpRequest(XHR) 为什么不用它呢?非常好解释配置和调用方式等非常混 ...

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

    最近公司使用React作为前端框架,使用了异步请求访问,这里做下总结: React Native中虽然也内置了XMLHttpRequest 网络请求API(也就是俗称的ajax),但XMLHttpRe ...

  6. React-Native 之 GD (九)POST 网络请求封装

    1.POST /** * * POST请求 * * @param url * @param params {}包装 * @param headers * * @return {Promise} * * ...

  7. React Native学习(八)—— 对接七鱼客服

    本文基于React Native 0.52 Demo上传到Git了,有需要可以看看,写了新内容会上传的.Git地址 https://github.com/gingerJY/React-Native-D ...

  8. Android,适合Restful网络请求封装

    借助volley.Gson类库. 优点 网络请求集中处理,返回值直接为预期的对象,不需要手动反序列,提高效率,使用时建立好model类即可. 使用效果 DataProess.Request(true, ...

  9. iOS开发——post异步网络请求封装

    IOS中有许多网络请求的函数,同步的,异步的,通过delegate异步回调的. 在做一个项目的时候,上网看了很多别人的例子,发现都没有一个简单的,方便的异步请求的封装例子.我这里要给出的封装代码,是异 ...

随机推荐

  1. django商城项目之用sentry管理日志

    之前写商城项目的时候,采用的日志处理方式为在终端输出或者写入文件,这样的话,项目部署上线之后,若服务器出现错误,需要到服务器查看相关的错误日志,很不方便.后期在学习别人开源项目的时候,学习到一个开源的 ...

  2. 一分钟搭建 Web 版的 PHP 代码调试利器

    一.背景   俗话说:"工欲善其事,必先利其器".作为一门程序员,我们在工作中,经常需要调试某一片段的代码,但是又不想打开繁重的 IDE (代码编辑器).使用在线工具调试代码有时有 ...

  3. 前端UI库推荐(pc和移动)

    此推荐个人喜好,不喜勿喷. 1. pc 端 elementUI (生态强大,样式生硬) iview (推荐,组件丰富) bootStrap layUI easyUi 2. 移动端 mintUI ant ...

  4. 剑指offer-复杂链表的复制-链表-python

    题目描述 输入一个复杂链表(每个节点中有节点值,以及两个指针,一个指向下一个节点,另一个特殊指针指向任意一个节点),返回结果为复制后复杂链表的head.(注意,输出结果中请不要返回参数中的节点引用,否 ...

  5. Qradar SIEM--查询利器 AQL

    对于 SIEM 平台来说,好用的查询方式非常重要.之前有体验基于 ELK 搭建的平台,在 kibana 上面是可以通过一些 filter 来做一些过滤并且是支持 lucene 的语法,包括一些简单的逻 ...

  6. 编辑SE16N表的函数

    函数:SE16N_INTERFACE 此外还可以SE16N 输入对应的查询条件后执行debug该变量 GD-SAPEDIT = ‘X’ 和GD-EDIT = ‘X’ 来实现当前SE16N 中该表的编辑

  7. freemarker如何在url中传递中文参数

    例如:http://www.map512.cn/findPOI.do?key=南门如果不转码,request.getParameter("key")返回的是乱码,在jsp中,我们一 ...

  8. mkswap - 建立一个linux交换区

    总览 mkswap [-c] [-vN] [-f] device [size] 描述 mkswap 在一个设备上或者在一个文件里创建一个linux交换区. (该交换区创建后,必须使用 swapon 命 ...

  9. 1、Framework7

    一. <!DOCTYPE html> <html> <head> <!-- 所需的Meta标签--> <meta charset="ut ...

  10. 2019长安大学ACM校赛网络同步赛 B Trial of Devil (递归)

    链接:https://ac.nowcoder.com/acm/contest/897/B来源:牛客网 Trial of Devil 时间限制:C/C++ 1秒,其他语言2秒 空间限制:C/C++ 32 ...