react-native fetch的具体使用方法

大佬教程收集整理的这篇文章主要介绍了react-native fetch的具体使用方法，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。

在前端快速发展地过程中，为了契合更好的设计模式，产生了 fetch 框架，此文将简要介绍下 fetch 的基本使用。

在 AJAX 时代，进行请求 API 等网络请求都是通过 XMLhttprequest 或者封装后的框架进行网络请求。

现在产生的 fetch 框架简直就是为了提供更加强大、高效的网络请求而生，虽然在目前会有一点浏览器兼容的问题，但是当我们进行 Hybrid App 开发的时候，如我之前介绍的Ionic 和React Native，都可以使用 fetch 进行完美的网络请求。

fetch 初体验

在 Chrome 浏览器中已经全局支持了 fetch 函数，打开调试工具，在 Console 中可以进行初体验。先不考虑跨域请求的使用方法，我们先请求同域的资源，如在我的博客页面中，打开 Console 进行如下请求。

返回的数据：

这样就很快速地完成了一次网络请求，我们发现返回的数据也比之前的 XMLhttprequest 丰富、易用的多。

关于 fetch 标准概览

虽然 fetch 还不是作为一个稳定的标准发布，但是在其一直迭代更新的 标准描述 中，我们发现已经包含了很多的好东西。

fetch 支持了大部分常用的 http 的请求以及和 http 标准的兼容，如 http Method，http Headers，request，Response。

fetch 的使用

fetch的入口函数定义在Node_modules/whatwg-fetch.js文件中，如下

该函数在Network/fetch.js中被导出，最终在initializeCore.js中被注册为global的属性变为全局函数。fetch返回的是一个Promise。

跟随方法走向，依次调用的是XMLhttprequest.js的send -> RCTNetworking.ios.js的sendrequest -> 最终调到原生端RCTNetworking.mm的sendrequest方法。

相关问题点：

1、为何fetch函数无法设置timeout？

为了设置fetch的timeout，我会如下定义一个函数

然后如下调用

先定义一个Promise，其在超时时间结束后reject。将这个Promise和fetch合并到Promise.race中，则一旦这两个请求谁先执行，另外一个会被舍弃。这样完成超时时间的设置。

但是查看源码发现oc中是有超时时间设置这个选项的，且js和oc通信时也传了这个参数，问题是出在入口函数fetch处，只需要在上面fetch方法中添加上如下

就可以在请求参数中设置超时时间了，如

2、fetch函数为何无法cancel？

fetch在原生端是NSURLSessionDataTask发的请求，这个是可取消的。在js端的XMLhttprequest.js中也发现了abort方法，调用能够取消当前网络请求。问题出在了fetch的接口函数。

首先，要想请求能够取消，得拿到当前请求对应的requestId。请求的执行顺序是js端发起 -> OC生成request，得到requestId，利用NSURLSessionDataTask发起请求 -> 将requestId通过回调的形式传回给js端，js若想取消该请求，执行abort方法即可。

要想fetch函数能够执行cancel，只需该方法将XMLhttprequest对象返回即可。但是那样，就不再是一个Promise了。 也可以将cancel方法绑定到返回的Promise对象上，修改方法如下

如此，调用的时候就比较恶习了，要如下

不能fecth().then().then()的模式调用，因为这样会导致返回的那个Promise不再是上面绑定了cancel的那个Promise。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持菜鸟教程。

大佬总结

以上是大佬教程为你收集整理的react-native fetch的具体使用方法全部内容，希望文章能够帮你解决react-native fetch的具体使用方法所遇到的程序开发问题。

如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。