React-Native 之 GD (八)GET 网络请求封装
1.到这里,相信各位对 React-Native 有所熟悉了吧,从现在开始我们要慢慢往实际的方向走,这边就先从网络请求这部分开始,在正式开发中,网络请求一般都单独作为一部分,我们在需要使用的地方只需要简单调用一下即可,这样做的好处是让整个 工程 的结构更加清晰,让组件们各司其职,只管好自己该管的事,并且后期维护成本也会相应降低。
首先,我们要先对 fetch 的 GET 和 POST 请求方式进行一层基础封装,也就是要把它们单独独立出来,那么这边先来看下 GET 这边:
HTTPBase.js
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 | /** * 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; |
调用
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | // 网络请求 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) => { }) } |
.
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· Linux glibc自带哈希表的用例及性能测试
· 深入理解 Mybatis 分库分表执行原理
· 如何打造一个高并发系统?
· .NET Core GC压缩(compact_phase)底层原理浅谈
· 现代计算机视觉入门之:什么是图片特征编码
· 手把手教你在本地部署DeepSeek R1,搭建web-ui ,建议收藏!
· Spring AI + Ollama 实现 deepseek-r1 的API服务和调用
· 数据库服务器 SQL Server 版本升级公告
· C#/.NET/.NET Core技术前沿周刊 | 第 23 期(2025年1.20-1.26)
· 程序员常用高效实用工具推荐,办公效率提升利器!