[RN] React Native Fetch请求设置超时
一、实现思路
这个时候会有三种情况出现:
1.A任务在8秒内完成(假定8秒超时),Promise.race任务正常结束。
2.超过8秒A任务仍然未完成,由B任务计时结束自动中断Promise.race。
3.发生异常,Promise.race自动结束。
针对以上三种情况来设计网络超时方案。
二、代码
//先定义延时函数
const delay = (timeOut = *) =>{
return new Promise((resolve,reject) =>{
setTimeout(() =>{
reject(new Error('网络超时');
},timeOut);
})
} //fetch网络请求
const fetchPromise = (method,url, formData) =>{
return new Promise((resolve, reject) => {
fetch(url,{
method: method,
body:formData
}).then((response) => {
if (response.ok) {
return response.json();
} else {
reject(new Error('服务器异常'));
}
}).then((responseJson) => {
resolve (responseJson);
}).catch((err) => {
reject(new Error(err);
})
})
} //race任务
const _fetch = (fetchPromise, timeout) => {
return Promise.race([fetchPromise,delay(timeout)]);
} //post
const HttpPost = (url, formData,timeout = *) =>{
return _fetch(fetchPromise('POST', url, formData), timeout);
}; //get
const HttpGet = (url,timeout = *) =>{
return _fetch(fetchPromise('Get', url), timeout);
};
export {HttpPost ,HttpGet}
参考:
https://www.jianshu.com/p/2df7c6e3b3c3
本博客地址: wukong1688
本文原文地址:https://www.cnblogs.com/wukong1688/p/10963004.html
转载请著名出处!谢谢~~
[RN] React Native Fetch请求设置超时的更多相关文章
- React Native 网络请求封装:使用Promise封装fetch请求
最近公司使用React作为前端框架,使用了异步请求访问,这里做下总结: React Native中虽然也内置了XMLHttpRequest 网络请求API(也就是俗称的ajax),但XMLHttpRe ...
- 《React Native 精解与实战》书籍连载「React Native 网络请求与列表绑定」
此文是我的出版书籍<React Native 精解与实战>连载分享,此书由机械工业出版社出版,书中详解了 React Native 框架底层原理.React Native 组件布局.组件与 ...
- [RN] React Native 常见基本问题归纳总结
[RN] React Native 常见基本问题归纳总结 本问题总结涉及到版本为: "react": "16.8.3","react-native& ...
- [RN] React Native 幻灯片效果 Banner
[RN] React Native 幻灯片效果 Banner 1.定义Banner import React, {Component} from 'react'; import {Image, Scr ...
- [RN] React Native 实现 类似QQ 登陆页面
[RN] React Native 实现 类似QQ 登陆页面 一.主页index.js 项目目录下index.js /** * @format */ import {AppRegistry} from ...
- [RN] React Native 实现图片预览
[RN] React Native 实现图片预览 效果预览: 代码如下: 'use strict'; import React, {Component} from 'react'; import {I ...
- [RN] React Native 关闭所有黄色警告
[RN] React Native 关闭所有黄色警告 console.ignoredYellowBox = ['Warning: BackAndroid is deprecated. Please u ...
- [RN] React Native 下实现底部标签(支持滑动切换)
上一篇文章 [RN] React Native 下实现底部标签(不支持滑动切换) 总结了不支持滑动切换的方法,此篇文章总结出 支持滑动 的方法 准备工作之类的,跟上文类似,大家可点击上文查看相关内容. ...
- [RN] React Native 常用命令行
[RN] React Native 常用命令行 1.查看当前版本 react-native --version 或 react-native -v 2.创建指定版本的React Native项目 1) ...
随机推荐
- Oracle学习笔记(五)
如何查询硬解析问题: --捕获出需要使用绑定变量的SQL drop table t_bind_sql purge; create table t_bind_sql as select sql_text ...
- APS.NET MVC + EF (01)---Linq和Lambda表达式
1.1 Linq介绍 LINQ全称 Language Integrated Query(语言集成查询).为我们提供一种统一的方式来查询和操作各种数据. LINQ to Object:是针对实现了IEn ...
- 【SQL】各取所需 | SQL JOIN连接查询各种用法总结
前面 在实际应用中,大多的查询都是需要多表连接查询的,但很多初学SQL的小伙伴总对各种JOIN有些迷糊.回想一下,初期很长一段时间,我常用的似乎也就是等值连接 WHERE 后面加等号,对各种JOIN也 ...
- statsvn使用小记
准备工作 1.安装TortoiseSVN,在安装时需要安装svn命令行工具: 2.拉取svn代码: svn co https://svn.myserver.cn/svn/myproject1\trun ...
- 基于OpenGL的三维曲面动态显示实现
在使用Visual C++的MFC AppWizard建立应用程序框架后,生成了多个类,与OpenGL编程相关的类是视图类,主要的显示任务都在其中完成. 1.基于OpenGL绘图的基本设置 1.1 设 ...
- ajxa和axios的区别
1.axios 原理还是属于 XMLHttpRequest, 因此需要实现一个ajax. 2.但还会需要一个promise对象来对结果进行处理.3.ajax实现var Ajax={ get: func ...
- 渐进增强(progressive enhancement)、优雅降级(graceful degradation)
渐进增强 progressive enhancement: 针对低版本浏览器进行构建页面,保证最基本的功能,然后再针对高级浏览器进行效果.交互等改进和追加功能达到更好的用户体验. 优雅降级 grace ...
- java 之 集合概述
一.集合概述 不管是哪一种数据结构,其实本质上都是容器来着,就是用来装对象的.因此,我们就要搞清楚两点:(1)如何存储(2)存储特点 1.集合 集合是 Java 中提供的一种容器,可以用来存储多个数据 ...
- iOS UILanel 一些小实用
UILabel *lab=[[UILabel alloc]initWithFrame:self.view.bounds]; //合并 lab.text=[NSString stringWithForm ...
- Java面试通关要点 汇总集【最终版】
本文转载自公众号:服务端思维,阅读大约需要7分钟.梁兄的知识储备很丰富,组织的知识星球里也是干货十足,平常还会有技术研习等活动,欢迎关注. 首先,声明下,以下知识点并非阿里的面试题.这里,笔者结合自己 ...