axios的兼容性問題


1、axios在PC端瀏覽器的兼容性問題

axios支持IE8+,但原理是基於promise之上實現的,因此會存在不兼容IE的問題。

trident內核的瀏覽器下會報:vuex requires a Promise polyfill in this browser

 

 

IE9下 axios 報錯問題

解決方案:

(1)、首先安裝 babel-polyfill,來解決IE不支持 promise對象的問題

npm  install  babel-polyfill -s

(2)、安裝成功以后需要在 main.js 中引入 babel-polyfill

import 'babel-polyfill'

一般會配置 webpack.base.config.js 中 entry

module.exports = {
  context: path.resolve(__dirname, '../'),
  entry: {
    app: ["babel-polyfill", "./src/main.js"] 
    // app: './src/main.js'
  },
}

2、axios在安卓低版本兼容性處理

在較低版本的安卓手機中發現發現封裝的axios請求無效,主要原因還是低版本的安卓手機無法使用promise

注意:安卓4.3以下的手機不支持axios的使用,無法使用promise,加上 polyfill就可以了。

解決方案: (1)、項目中安裝 es6-promise

npm install es6-promise -s

(2)、引入 es6-promise

import promise from 'es6-promise'

(3)、注冊 es6-promise (一定要在axios之前注冊)

// 注意: es6-promise   一定要在 axios 請求 之前注冊

promise.polyfill()

或者

require('es6-promise').polyfill();

 

 

Browser(瀏覽器) cdn方式引入qs庫的使用方法

Browser cdn方式引入qs庫使用

普通html頁面使用axios post提價數據需要處理提交的數據,一般用到qs庫
今天剛好用到,記錄下來
  <script src="https://cdn.bootcss.com/qs/6.7.0/qs.min.js"></script>

  <script src="https://cdn.bootcss.com/axios/0.18.0/axios.min.js"></script>

<html>
    <body>
        <div>
            
        </div>
        <script>
            
            // 一般引入qs庫都賦值為qs,不過瀏覽器全局引入的是 window.Qs對象,
            // 所以直接用 qs.stringify() 會報 qs undefined
            var qs = Qs 
            // 配置post的請求頭
            axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded'
            // qs.stringify() 這里可以做一下封裝
            axios.post('url', qs.stringify({
                id: 1,
                name: 'zhangsan'
            })).then(function(res) {
                // 返回 Promise對象數據
            })
        </script>
    </body>
</html>


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM