使用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 写在哪里