ReactNative——fetch封装新姿势

最新推荐文章于 2023-07-26 20:32:07 发布

TaoLee-

最新推荐文章于 2023-07-26 20:32:07 发布

阅读量1k

点赞数

分类专栏： ReactNative UI

本文链接：https://blog.csdn.net/TaooLee/article/details/77932835

版权

本文介绍了如何在ReactNative中封装fetch，实现包括基本网络请求、异常处理、自定义loading、Header设置、超时和登录验证等功能。同时，讨论了特殊URL字符处理和网络请求日志打印的调试技巧，利用iflux-native框架的msg.emit()方法进行事件调用。

摘要由CSDN通过智能技术生成

React和ReactNative 的网络请求使用的是fetch

关于基本的POST和GET请求以及异步变同步就不再描述，看看API的介绍。

网络请求封装要完成的内容有：

1、基本功能（网络请求）

2、统一处理

异常处理
不同错误码处理

3、可定制loading弹窗提示

4 、可定制Header

5、超时处理

6、登陆验证token处理

7、url 特殊字符处理

8、网络请求日志打印

超级方便的调试技巧

const WrapFetch = (url, req, config) => {
  //默认参数
  let request = {
    method: 'GET',
    headers: {
      'Accept': 'application/json',
      'Content-Type': 'application/json',
      'Authorization': 'Bearer ' + (window.token || '')
    }
  };

  //配置参数
  //默认不显示进度条，如果需要显示config传参{ showLoading: