使用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請求》二維碼
  • 微信打賞
  • 支付寶打賞

已有24條評論

  1. siyk

    build/webpack.base.conf.js修改alias別名,封裝的axios方法里假adapter,點贊

    2019-06-23 15:10 回復
  2. 今日頭條新聞

    文章不錯支持一下吧

    2019-04-08 00:04 回復
  3. 大本事

    我有點不懂啊, 在哪個文件下更改東西,有沒有完整的項目發一個

    2019-01-16 13:20 回復
  4. wordpress建站吧

    深奧的一筆啊,看不懂,大神

    2018-12-31 15:26 回復
  5. magicessay

    我們可以交換友鏈嗎

    2018-10-25 17:18 回復
  6. 游客 104

    我記得又一次 因為一個中文的逗號出BUG了 找了八九個小時

    2018-10-09 09:35 回復
  7. 游客 15

    值得學習

    2018-08-13 09:52 回復
  8. chris

    var con = {
    method: config.method,
    url: config.url,
    header: request.headers,
    success(res) {

    },
    fail(res) {

    }
    }
    //調用微信接口發出請求
    wx.request(con)

    2018-07-31 15:32 回復
    • 樸人博客

      adapter怎么寫的?這里貼代碼不方便,建議從右側點qq群或者qq交流

      2018-08-01 12:14 回復
  9. sirdt

    大神你好,請問為什么我axios連請求都沒發出去,一點反饋都沒有

    2018-07-24 18:06 回復
    • 樸人博客

      你代碼怎么寫的,至少要調用wx.request吧

      2018-07-24 18:22 回復
  10. Angus

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

    2018-06-26 15:54 回復
  11. bt110

    謝謝博主熱心分享,留言支持一下,也歡迎回訪一下我的網站

    2018-05-23 11:31 回復
  12. 游客 315

    活到老 學到老 真好

    2018-05-05 17:01 回復
  13. 游客 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 回復
  14. 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 回復
  15. gk

    我按照你的思路改了 沒有報錯 但好像也沒有觸發請求

    2018-04-08 15:58 回復
  16. gk

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

    2018-04-08 15:56 回復
  17. gk

    你好 adapter 寫在哪里

    2018-04-08 15:40 回復

(必填)

(必填)

(可選)

黑龙江22选5开奖