使用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的整合了,简单记录一下,欢迎分享交流。

使用mpvue开发小程序——axios发送ajax请求
文章《使用mpvue开发小程序——axios发送ajax请求》二维码
  • 微信打赏
  • 支付宝打赏

已有11条评论

  1. Angus

    你这个想法真的是牛逼,用了用了这么久axios竟然不知道adapter

    2018-06-26 15:54 回复
  2. bt110

    谢谢博主热心分享,留言支持一下,也欢迎回访一下我的网站

    2018-05-23 11:31 回复
  3. 游客 315

    活到老 学到老 真好

    2018-05-05 17:01 回复
  4. 游客 535

    你好 adapter 写在哪里

    2018-04-11 10:33 回复
    • 朴人博客

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

      2018-04-11 13:24 回复
  5. gk

    import axios from ‘axios’

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

    export default axios;

    我是这么写的

    然后再vue 里面 直接import 进去

    再axios.get(…)获取 没有触发请求

    2018-04-08 15:59 回复
    • 朴人博客

      console.log(config)
      // TODO wx.request(…)
      这里意思是让你根据config信息调用wx.request,不然适配器就是个空Promise,肯定没有请求的

      2018-04-09 09:19 回复
      • gk

        哦 明白了 谢谢

        2018-04-09 14:04 回复
  6. gk

    我按照你的思路改了 没有报错 但好像也没有触发请求

    2018-04-08 15:58 回复
  7. gk

    // TODO wx.request(…)
    你这句是什么意思

    2018-04-08 15:56 回复
  8. gk

    你好 adapter 写在哪里

    2018-04-08 15:40 回复

(必填)

(必填)

(可选)