使用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的整合了,简单记录一下,欢迎分享交流。
- 固定链接:https://www.poorren.com/mpvue-mini-program-ajax-axios
- 文章标签:axios,wx,小程序
- 扫二维码:使用mpvue开发小程序——axios发送ajax请求
- 版权所有:除"转载分享"分类外,未经注明,均为原创、整理,转载请注明出处。
build/webpack.base.conf.js修改alias别名,封装的axios方法里假adapter,点赞
文章不错支持一下吧
我有点不懂啊, 在哪个文件下更改东西,有没有完整的项目发一个
不懂你说的更改什么
深奥的一笔啊,看不懂,大神
我们可以交换友链吗
不换了
我记得又一次 因为一个中文的逗号出BUG了 找了八九个小时
值得学习
var con = {
method: config.method,
url: config.url,
header: request.headers,
success(res) {
},
fail(res) {
}
}
//调用微信接口发出请求
wx.request(con)
adapter怎么写的?这里贴代码不方便,建议从右侧点qq群或者qq交流
大神你好,请问为什么我axios连请求都没发出去,一点反馈都没有
你代码怎么写的,至少要调用wx.request吧
你这个想法真的是牛逼,用了用了这么久axios竟然不知道adapter
谢谢博主热心分享,留言支持一下,也欢迎回访一下我的网站
活到老 学到老 真好
你好 adapter 写在哪里
axios.defaults.adapter = function (config) {
return new Promise((resolve, reject) => {
console.log(config)
// TODO wx.request(…)
})
}
import axios from ‘axios’
axios.defaults.adapter = function (config) {
return new Promise((resolve,reject) => {
// console.log(config)
})
}
export default axios;
我是这么写的
然后再vue 里面 直接import 进去
再axios.get(…)获取 没有触发请求
console.log(config)
// TODO wx.request(…)
这里意思是让你根据config信息调用wx.request,不然适配器就是个空Promise,肯定没有请求的
哦 明白了 谢谢
我按照你的思路改了 没有报错 但好像也没有触发请求
// TODO wx.request(…)
你这句是什么意思
你好 adapter 写在哪里