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

来源:07素材网 01月11日 16:28
依托于热门的小程序,美团最近开源的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的整合了,简单记录一下,欢迎分享交流。
原文出处:https://www.poorren.com/mpvue-mini-program-ajax-axios
版权声明:本文来源地址若非本站均为转载,若侵害到您的权利,请及时联系我们,我们会在第一时间进行处理。

头条

在使用SQLite3时遇到的几个坑

在使用SQLite3时遇到的几个坑

《本打算在SQLite3数据库里执行一个查询语句,使用的是php语言,起初遇到的是权限问题: permission denied,因为SQLite3数据库文件和PHP执行者属于两个不同的用户,首先需要对这个文件执行mode 777的权限开放,然后,又遇到了下面这样的PHP错误