朴人博客

依托于热门的小程序，美团最近开源的mpvue一下子火了，刚好项目上有需求想试用下mpvue，发现众多限制下，连目前常用的ajax请求库axios都不能正常构建。

默认添加了axios，你可能得到如下错误

thirdScriptError 
 sdk uncaught third Error 
 util.inherits is not a function 
 TypeError: util.inherits is not a function

因为项目为开发平台，不少用户重度依赖axios，一开始建议小伙伴尝试写adapter支持小程序请求，小伙伴反馈了如上错误，并建议使用社区宣传比较火热的fly。fly其实api和axios几乎一致，但还是有差异，未防止核心库变更对平台客户带来不便，决定展开axios代码一探究竟。

看错误信息，似乎是因为某些依赖导致的，而axios默认是模块化加载，其中部分模块用了window之类bom api或node相关api，都是小程序不支持的。

开始翻源码，这里省略n行字……

基本确定，是axios本身导致的问题，而npm安装后的axios包中包含有umd文件，果断通过webpack别名（alias）将axios指向axios/dist/axios，如下

alias: {
    'vue': 'mpvue',
    'axios':'axios/dist/axios',
    '@': resolve('src')
}

再次刷新构建后的小程序界面，触发请求，原来的错没了，但是

Uncaught (in promise) TypeError: XMLHttpRequest is not a constructor
    at dispatchXhrRequest (axios.js:699)
    at Promise (<anonymous>)
    at xhrAdapter (axios.js:691)
    at dispatchRequest (axios.js:1371)
    at <anonymous>

好吧，又是小程序环境和浏览器不一致导致的，不过别慌，我们可以写adapter

axios.defaults.adapter = function (config) {
    return new Promise((resolve, reject) => {
        console.log(config)
        // TODO wx.request(...)
    })
}

adapter写好了，再刷新页面，发出请求，是不是完美看到打印的config信息？

好了，到这里我们就完成axios的整合了，简单记录一下，欢迎分享交流。