一、实现思路

根据Promise.race的特性,我们在Promise.race里面添加两个任务,一个是正常的网络请求任务A,另外一个便是网络延时任务B,网络延时可以利用setTimeout方法实现。
这个时候会有三种情况出现:
1.A任务在8秒内完成(假定8秒超时),Promise.race任务正常结束。
2.超过8秒A任务仍然未完成,由B任务计时结束自动中断Promise.race。
3.发生异常,Promise.race自动结束。
针对以上三种情况来设计网络超时方案。

二、代码

HttpUtil.js
 
//先定义延时函数
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请求设置超时的更多相关文章

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

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

  2. 《React Native 精解与实战》书籍连载「React Native 网络请求与列表绑定」

    此文是我的出版书籍<React Native 精解与实战>连载分享,此书由机械工业出版社出版,书中详解了 React Native 框架底层原理.React Native 组件布局.组件与 ...

  3. [RN] React Native 常见基本问题归纳总结

    [RN] React Native  常见基本问题归纳总结 本问题总结涉及到版本为: "react": "16.8.3","react-native& ...

  4. [RN] React Native 幻灯片效果 Banner

    [RN] React Native 幻灯片效果 Banner 1.定义Banner import React, {Component} from 'react'; import {Image, Scr ...

  5. [RN] React Native 实现 类似QQ 登陆页面

    [RN] React Native 实现 类似QQ 登陆页面 一.主页index.js 项目目录下index.js /** * @format */ import {AppRegistry} from ...

  6. [RN] React Native 实现图片预览

    [RN] React Native 实现图片预览 效果预览: 代码如下: 'use strict'; import React, {Component} from 'react'; import {I ...

  7. [RN] React Native 关闭所有黄色警告

    [RN] React Native 关闭所有黄色警告 console.ignoredYellowBox = ['Warning: BackAndroid is deprecated. Please u ...

  8. [RN] React Native 下实现底部标签(支持滑动切换)

    上一篇文章 [RN] React Native 下实现底部标签(不支持滑动切换) 总结了不支持滑动切换的方法,此篇文章总结出 支持滑动 的方法 准备工作之类的,跟上文类似,大家可点击上文查看相关内容. ...

  9. [RN] React Native 常用命令行

    [RN] React Native 常用命令行 1.查看当前版本 react-native --version 或 react-native -v 2.创建指定版本的React Native项目 1) ...

随机推荐

  1. Oracle学习笔记(五)

    如何查询硬解析问题: --捕获出需要使用绑定变量的SQL drop table t_bind_sql purge; create table t_bind_sql as select sql_text ...

  2. APS.NET MVC + EF (01)---Linq和Lambda表达式

    1.1 Linq介绍 LINQ全称 Language Integrated Query(语言集成查询).为我们提供一种统一的方式来查询和操作各种数据. LINQ to Object:是针对实现了IEn ...

  3. 【SQL】各取所需 | SQL JOIN连接查询各种用法总结

    前面 在实际应用中,大多的查询都是需要多表连接查询的,但很多初学SQL的小伙伴总对各种JOIN有些迷糊.回想一下,初期很长一段时间,我常用的似乎也就是等值连接 WHERE 后面加等号,对各种JOIN也 ...

  4. statsvn使用小记

    准备工作 1.安装TortoiseSVN,在安装时需要安装svn命令行工具: 2.拉取svn代码: svn co https://svn.myserver.cn/svn/myproject1\trun ...

  5. 基于OpenGL的三维曲面动态显示实现

    在使用Visual C++的MFC AppWizard建立应用程序框架后,生成了多个类,与OpenGL编程相关的类是视图类,主要的显示任务都在其中完成. 1.基于OpenGL绘图的基本设置 1.1 设 ...

  6. ajxa和axios的区别

    1.axios 原理还是属于 XMLHttpRequest, 因此需要实现一个ajax. 2.但还会需要一个promise对象来对结果进行处理.3.ajax实现var Ajax={ get: func ...

  7. 渐进增强(progressive enhancement)、优雅降级(graceful degradation)

    渐进增强 progressive enhancement: 针对低版本浏览器进行构建页面,保证最基本的功能,然后再针对高级浏览器进行效果.交互等改进和追加功能达到更好的用户体验. 优雅降级 grace ...

  8. java 之 集合概述

    一.集合概述 不管是哪一种数据结构,其实本质上都是容器来着,就是用来装对象的.因此,我们就要搞清楚两点:(1)如何存储(2)存储特点 1.集合 集合是 Java 中提供的一种容器,可以用来存储多个数据 ...

  9. iOS UILanel 一些小实用

    UILabel *lab=[[UILabel alloc]initWithFrame:self.view.bounds]; //合并 lab.text=[NSString stringWithForm ...

  10. Java面试通关要点 汇总集【最终版】

    本文转载自公众号:服务端思维,阅读大约需要7分钟.梁兄的知识储备很丰富,组织的知识星球里也是干货十足,平常还会有技术研习等活动,欢迎关注. 首先,声明下,以下知识点并非阿里的面试题.这里,笔者结合自己 ...