【app非常重要】uni-app框架之彻底搞定APP端正常访问【ethers或web3的以太坊库的问题】【必须使用兼容app端跨域的XMLHttpRequest请求】

红太狼 2021-09-19 13:42 860阅读 0赞

**使用uni-app框架实现异步访问【ethers或web3以太坊区块链的数据】常见的错误：****【app端提示这个错误，H5不会提示】：Unhandled promise rejection, TypeError: undefined is not a constructor (evaluating 'new h.XMLHttpRequest()')**

## ##

### **错误原因分析：错误提示中的new h.XMLHttpRequest()是ethers.min.js压缩包中的代码，查看源码之后，发现原始的代码如下：** ###

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzM0MzE0NA_size_16_color_FFFFFF_t_70][]

### **错误解决办法【添加兼容APP端的**plus.net.XMLHttpRequest对象**】： ** ###

**![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzM0MzE0NA_size_16_color_FFFFFF_t_70 1][]**

### **修改源代码之【生成环境】** ###

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzM0MzE0NA_size_16_color_FFFFFF_t_70 2][]

### **修改源代码之【开发环境】** ###

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzM0MzE0NA_size_16_color_FFFFFF_t_70 3][]

**这个问题，要想真正得到解决，唯一的方式就是修改你用到的库ethers或web3的源代码，因为在传统的浏览器异步访问中，都是使用标准HTML中的XMLHttpRequest【仅浏览器支持，app端不支持】**

**为了解决这个问题，uni-app兼容了H5+，H5+中的XMLHttpRequest与标准HTML中的XMLHttpRequest用途一致，差别在于H5+可以进行跨域访问。通过plus.net可获取网络请求管理对象。**

HTML5+官方参考文档：[https://www.html5plus.org/doc/zh\_cn/xhr.html][https_www.html5plus.org_doc_zh_cn_xhr.html]

uni-app框架使用H5+的注意事项：[https://uniapp.dcloud.io/use-html5plus][https_uniapp.dcloud.io_use-html5plus]

uni-app框架提供的跨域解决方案：[https://ask.dcloud.net.cn/article/117][https_ask.dcloud.net.cn_article_117]

## ##

### 最后总结：提供要修改的完整代码【最重要的就是在引入ethers.js的时候必须指定修改后的ethers.js或ethers.min.js路径了，而直接import 'ethers'的方式默认是dist目录下的min文件】 ###

**正确引入方式：import \{ethers\} from "@/node\_modules/ethers/dist/ethers.js";【可以使用压缩工具压缩成min即可】**

// 解决兼容APP端跨域的问题,app端必须使用H5+中的plus.net.XMLHttpRequest【APP端不兼容标准HTML中的XMLHttpRequest】
    
    // #ifdef APP-PLUS
    var xmlhttprequest_1 = {}
    xmlhttprequest_1.XMLHttpRequest = plus.net.XMLHttpRequest;
    // #endif
    // #ifdef H5
    var xmlhttprequest_1 = require("xmlhttprequest");
    // #endif

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzM0MzE0NA_size_16_color_FFFFFF_t_70]: /images/20210812/3bcf161c95f04a0ca2537963b5591936.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzM0MzE0NA_size_16_color_FFFFFF_t_70 1]: /images/20210812/136ab514e1cb47118301b307a6ab1088.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzM0MzE0NA_size_16_color_FFFFFF_t_70 2]: /images/20210812/4fecf79283ba453ebc40d7e103365e94.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzM0MzE0NA_size_16_color_FFFFFF_t_70 3]: /images/20210812/b68a3fab425d4895b03931b2d0b2ca4e.png
[https_www.html5plus.org_doc_zh_cn_xhr.html]: https://www.html5plus.org/doc/zh_cn/xhr.html
[https_uniapp.dcloud.io_use-html5plus]: https://uniapp.dcloud.io/use-html5plus
[https_ask.dcloud.net.cn_article_117]: https://ask.dcloud.net.cn/article/117