react-native 0.54.3版本中可以使用fetch请

作者: NextStack | 来源:发表于2018-03-30 23:42 被阅读196次

最近更新下一栈的RN版本,从0.53更到了0.54.3,然后发现之前请求图片二进制数据的代码无法使用了!

调试了很久,才发现了最终原因:
fetch API支持了blob数据请求,于是上个帖子React-Native使用fetch获取二进制数据中的办法自然而然失效了。

新办法

得知fetch返回的类型支持blob之后,我们就考虑把这个blob数据转成base64了,我使用的代码如下:

function LoadImage (url) {
  return new Promise((RES, REJ) => {
    fetch(url).then(r => r.blob()).then(blob => {
      const reader = new FileReader();
      reader.onload = (e) => {
        const data = e.target.result;
        RES(data.split('base64,')[1]);
      }
      reader.readAsDataURL(blob);
    }).catch(REJ);
  })
}

export default LoadImage;

调用方法:

LoadImage('https://nextstack.xyz/static/qrcode.png`).then(base64 => {
  console.log('图片的base64编码');
})

提示:RN中的FileReader不支持readAsArrayBufferreadAsBinaryString等数据转换,所以我们这里用readAsDataURL

相关文章

  • react-native 0.54.3版本中可以使用fetch请

    最近更新下一栈的RN版本,从0.53更到了0.54.3,然后发现之前请求图片二进制数据的代码无法使用了! 调试了很...

  • 在React-Native中,使用fetch时,cookie问题

    在React-Native中,使用fetch时,cookie问题。 最近在使用fetch时,由于后端返回的请求头里...

  • react-native 0.62 fetch请求上传图片失败

    React-native 0.62 fetch请求上传图片失败 问题描述: Android使用fetch/xhr ...

  • React-Native之Fetch

    网络请求是开发过程中比不可少的一个环节。在React-Native中,使用fetch实现网络请求。fetch同XM...

  • React-Native Fetch网络请求

    在react-native开发中,使用Fetch进行网络请求。官方文档上的网络请求 基本使用方法 GET请求 ca...

  • SQL分页的几种方法

    方法一 使用offset fetch next(2012版本及以上版本才可以使用) 方法二 使用row_numbe...

  • 聊聊fetch

    聊聊fetch fetch的使用 fetch是一个发起异步请求的新api, 在浏览器(有些不支持)中可以直接使用。...

  • fetch函数设置timeout

    使用react-native开发app时,通常使用fetch函数与后台进行交互。请求后台接口时,为了防止用户等待太...

  • 企业级调优

    9.1 Fetch抓取(了解) Fetch抓取是指,Hive中对某些情况的查询可以不必使用MapReduce计算。...

  • Hive调优

    1、Fetch 抓取 Fetch 抓取是指,Hive 中对某些情况的查询可以不必使用 MapReduce 计算。例...

网友评论

  • e0fbe43e1906:兄弟可以给下demo么,我这边遇到二进制图片 不会加载
    NextStack:代码已经很清晰了哦,阅读一遍就懂原理了

本文标题:react-native 0.54.3版本中可以使用fetch请

本文链接:https://www.haomeiwen.com/subject/afmwcftx.html