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

使用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压缩包中的代码，查看源码之后，发现原始的代码如下：

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

 

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

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

 

这个问题，要想真正得到解决，唯一的方式就是修改你用到的库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

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

uni-app框架提供的跨域解决方案：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