使用mpvue开发小程序——axios发送ajax请求

依托于热门的小程序,美团最近开源的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的整合了,简单记录一下,欢迎分享交流。

人已赞赏
网络技术

页面性能的几个评测点

2018-7-14 20:56:34

网络技术

前端菜鸟如何机智地弄坏一台电脑?

2018-8-18 18:57:27

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索