文章目錄

• 報錯示例
• 背景知識
• 原因
• 解決方案
• Tip

報錯示例

使用了 Vue 以及用 axios 來發請求，在谷歌瀏覽器上面，預覽是沒有問題的：
（下圖中紅色內容，是我調介面獲取到的內容，然後顯示在頁面上）

但是在 IE 瀏覽器下，卻沒有看到介面獲取的內容顯示在頁面上

F12，看了一下錯誤資訊：

包括安卓5以下的裝置，也會有這種情況。

背景知識

Babel 預設只轉換新的 JavaScript 句法，而不轉換新的 API，比如 Iterator、Generator、Set、Map、Proxy、Reflect、Symbol、Promise 等全域性物件，以及一些定義在全域性物件上的方法（比如 Object.assign）都不會轉碼。Babel 預設不轉碼的 API 非常多，詳細清單可以檢視

原因

原因就是 axios 是基於 promise 來實現的，IE 和低版本的裝置不支援 promise。

解決方案

方案一、使用 es6-promise

npm install es6-promise -S

// 在 main.js 首行引入即可
require("es6-promise").polyfill()

這樣，就已經可以解決你的問題了。

因為我的專案中是有對 axios 進行封裝的，而且我也不喜歡在 main.js 中來做這個操作，所以我將這個操作移到了 request.js 這個檔案的開頭。（request.js 的用途是用來對 axios 進行封裝）

// request.js
require("es6-promise").polyfill()
import axios from 'axios'

當然，你也可以使用 import 的方式：

// request.js
import 'es6-promise/auto'
import axios from 'axios'

ok，現在問題解決了【IE和低版本的安卓裝置都沒問題了】：

方案二、使用 babel-polyfill

npm install babel-polyfill -S

// 在 main.js 首行引入即可
import "babel-polyfill"

因為我的專案中是有對 axios 進行封裝的，而且我也不喜歡在 main.js 中來做這個操作，所以我將這個操作移到了 request.js 這個檔案的開頭。（request.js 的用途是用來對 axios 進行封裝）

// request.js
import 'babel-polyfill'
import axios from 'axios'

或者：
webpack.config.js 中：

module.exports = {
  // entry: {
  //   app: './src/main.js'
  // },
  entry: ['babel-polyfill', './src/main.js'],
}

將原來的

entry: {
  app: './src/main.js'
}

改為：

entry: ['babel-polyfill', './src/main.js']

重新執行構建命令，問題同樣解決了，IE和低版本安卓裝置都可以正常傳送請求了。很棒！

Tip

最後還是有一點提示想對你說：
1、不管是方案一還是方案二，建議的使用方式都是在 request.js 的頭部引入。

2、es6-promise 和 babel-polyfill 檔案大小的問題：


兩者體積大小沒有明顯差異。

OK，寫完了，希望可以幫到你們。提前祝大家週末愉快。

---------------------------(正文完)------------------------------------
一個 Vue 的學習交流群，想進來面基的，可以點選這個logo，或者手動search群號：685486827

更多學習資源請關注我的新浪微博…