功能特性

• 在瀏覽器中傳送 XMLHttpRequests 請求
• 在 node.js 中傳送 http請求
• 支援 Promise API
• 攔截請求和響應
• 轉換請求和響應資料
• 自動轉換 JSON 資料
• 客戶端支援保護安全免受 XSRF 攻擊

瀏覽器支援

使用

npm install axios --save-dev

import axios from 'axios'

這時候如果在其它的元件中，是無法使用 axios 命令的。

Vue.use(axios)          // 注意 這樣的用法是有問題的，axios不支援Vue.use()的宣告方式
 

但如果將 axios 改寫為 Vue 的原型屬性，就能解決這個問題

Vue.prototype.$ajax = axios

在 main.js 中添加了這兩行程式碼之後，就能直接在元件的 methods 中使用 $ajax 命令

methods: {
  getData() {
    this.axios({
      method: 'get',
      url: 'data/personData.json'
    })
    .then(function (response) {
      console.log(response)
    })
    .catch(function (error) {
      console.log(error)
    })
  }
}
 

這是axios的回撥函式，.then為請求成功的回撥函式，而.catch為請求失敗的回撥函式。

這兩個回撥函式都有各自獨立的作用域，如果直接在裡面訪問 this，無法訪問到 Vue 例項，怎麼辦？

只要新增一個 .bind(this) 就能解決這個問題

then(function(res){
 console.log(this.data)
}.bind(this))

一些坑

1.vue cli腳手架前端調後端資料介面時候的本地代理跨域。

如我在本地localhost訪問介面http://40.00.100.100:3002/是要跨域的，相當於瀏覽器設定了一到門檻，會報錯XMLHTTPRequest can not load http://40.00.100.100:3002/. Response to preflight request doesn’t pass access control…. 在webpack配置一下proxyTable就OK了，如下 

dev: {
    加入以下
    proxyTable: {
      '/api': {
        target: 'http://40.00.100.100:3002/',//設定你呼叫的介面域名和埠號 別忘了加http
        changeOrigin: true,
        pathRewrite: {
          '^/api': '/'//這裡理解成用‘/api’代替target裡面的地址，後面元件中我們掉介面時直接用api代替 比如我要呼叫'http://40.00.100.100:3002/user/add'，直接寫‘/api/user/add’即可
        }
      }
    },

試一下，跨域成功了，但是注意了，這只是開發環境（dev）中解決了跨域問題，生產環境中真正部署到伺服器上如果是非同源還是存在跨域問題，如我們部署的伺服器埠是3001，需要前後端聯調，第一步前端我們可以分生產production和開發development兩種環境分別測試，在config/dev.env.js和prod.env.js裡也就是開發/生產環境下分別配置一下請求的地址API_HOST，開發環境中我們用上面配置的代理地址api，生產環境下用正常的介面地址，所以這樣配置

module.exports = merge(prodEnv, {
  NODE_ENV: '"development"',//開發環境
  API_HOST:"/api/"
})

module.exports = {
  NODE_ENV: '"production"',//生產環境
  API_HOST:'"http://40.00.100.100:3002/"'
}

當然不管是開發還是生產環境都可以直接請求http://40.00.100.100:3002/。配置好之後測試時程式會自動判斷當前是開發還是生產環境，然後自動匹配API_HOST，我們在任何元件裡都能用process.env.API_HOST來使用地址如

instance.post(process.env.API_HOST+'user/login', this.form)

然後第二步後端伺服器配置一下cros跨域即可，就是access-control-allow-origin：*允許所有訪問的意思。

綜上：開發的環境下我們前端可以自己配置個proxy代理就能跨域了，真正的生產環境下還需要後端的配合的。某大神說：此方法ie9及以下不好使，如果需要相容，最好的辦法是後端在伺服器埠加個代理，效果類似開發時webpack的代理。

2.axios傳送get post請求問題 

傳送post請求時一般都要設定Content-Type，傳送內容的型別，application/json指傳送json物件但是要提前stringify一下。application/xxxx-form指傳送？a=b&c=d格式，可以用qs的方法格式化一下，qs在安裝axios後會自動安裝，只需要元件裡import一下即可。

const postData=JSON.stringify(this.formCustomer);
'Content-Type':'application/json'}

const postData=Qs.stringify(this.formCustomer);//過濾成？&=格式
'Content-Type':'application/xxxx-form'}

3.axios攔截器的使用 

當我們訪問某個地址頁面時，有時會要求我們重新登入後再訪問該頁面，也就是身份認證失效了，如token丟失了，或者是token依然存在本地，但是卻失效了，所以單單判斷本地有沒有token值不能解決問題。此時請求時伺服器返回的是401錯誤，授權出錯，也就是沒有權利訪問該頁面。 
我們可以在傳送所有請求之前和操作伺服器響應資料之前對這種情況過濾。

// http request 請求攔截器，有token值則配置上token值
axios.interceptors.request.use(
    config => {
        if (token) {  // 每次傳送請求之前判斷是否存在token，如果存在，則統一在http請求的header都加上token，不用每次請求都手動添加了
            config.headers.Authorization = token;
        }
        return config;
    },
    err => {
        return Promise.reject(err);
    });

// http response 伺服器響應攔截器，這裡攔截401錯誤，並重新跳入登頁重新獲取token
axios.interceptors.response.use(
    response => {
        return response;
    },
    error => {
        if (error.response) {
            switch (error.response.status) {
                case 401:
                    // 這裡寫清除token的程式碼
                    router.replace({
                        path: 'login',
                        query: {redirect: router.currentRoute.fullPath}//登入成功後跳入瀏覽的當前頁面
                    })
            }
        }
        return Promise.reject(error.response.data) 
    });

一些坑的部分內容轉自BeterJane的部落格(https://blog.csdn.net/u012369271/article/details/72848102)