It is a simple problem to use the axios module in cocos creator 3.x, download the axios module with npm, install axios with npm, import and use it directly. In fact, the problem is very:
Unable to use after downloading. Versions over 0.19 are basically difficult to debug and there are too many errors;
File usage, I checked a lot of online information, some said that node-module can be used directly; some said that the dist directory should be used; some said that the import must be the axios.min.js file, etc. In short, there are many versions, but none of them can succeed in the end;
Debugging in the cocos browser is normal, but once the android real machine is black screen, there is no error or anything.
Due to the design of cocos creator, it is more troublesome to debug on the real machine. What is wrong can not be seen in android studio at all.
Waiting for a series of questions is very painful. After a few days of exploration, I finally summed up a set of success paths:
1. Download the correct version
At present, after testing, it is 0.19 that can run normally, (0.27 does not work, and 1.x does not work); enter in the terminal of visual studio code:
npm install --save-dev [email protected]Second, copy the file to the lib directory
Copy the required files to the lib directory under src, the purpose is to no longer rely on node-module management
Copy the axios.js and axios.map files to the assets/src/lib directory (create it if the lib directory does not exist), and copy the axios.d.ts file in the axios directory to the assets/src/lib directory . ( Note that axios.min.js and related files are not required, otherwise an error may be reported and the code cannot be modified later. ) The result is as follows:
3. Create your own reference file
For example, if I create a webapi.ts file and reference the axios module in it, the reference method must be the following code:
import axios from "./lib/axios.js";The writing method cannot be changed. For example, if the js suffix is removed, the compilation may pass, but it cannot run normally. For specific axios usage code, please refer to the online tutorial.
4. Modify the axios.js code
完成以上步骤后，代码可以基本运行，在浏览器模式下工作没有问题。但是，一旦构建发布到android中，会发生黑屏情况，通过andriod studio无法看到真实原因，因为ts代码已经编译过了，也没有输出相关的日志，总之无法运行。这是因为在原生状态和浏览器模式采用的组件的状态有差异造成的，这时候需要调整一些axios.js代码。
修改standardBrowserEnv函数
在1346行位置，代码内容：
urlParsingNode.setAttribute('href', href);
后增加代码：
if(urlParsingNode.pathname === undefined){
urlParsingNode.pathname = '/';
}这个是解决黑屏后，js报错提示（大约在1356行左右）：
TypeError: Cannot read property 'charAt' of undefined
原因很简单就是提前将pathname的undefined问题解决掉，如果是undefined就赋值为'/'，即可。
修改read函数
在1426行附近，将read函数替换为：
read: function read(name) {
var match = null;
if(document.cookie !== undefined){
match = document.cookie.match(new RegExp('(^|;\\s*)(' + name + ')=([^;]*)'));
}
return (match ? decodeURIComponent(match[3]) : null);
},实际上原来的代码如果读一下，主要也就是没有考虑 document.cookie为undefined的情况，这样在内置浏览器模式下为undefined会导致访问错误。最终情况是不返回任何网络访问结果。因此提前判断了cookie为undefined,然后返回结果null，程序就不会报错了。
3. 设置creator代码浏览器
if (sys.isNative) {
Object.defineProperty(navigator, "product", {value: "NativeScript"});
}这个代码放置在所有网络访问之前即可，如start()部分，甚至文件头部分都可以。功能是设置脚本缺省属性。（注意：如果能够确保第3步设置能够在所有axios初始化代码之前执行，似乎1，2步就不是必须的了，但最好测试下）
做完这一切，大功告成！