目錄

1. 安裝並引入axios

1.1 使用 npm/cnpm 安裝

1.2 在main.js檔案中引入axios

2. 使用axios請求本地json檔案

3. 將傳遞的json資料轉為FormData

3.1 引入qs

3.2 新增請求攔截器，將axios引數轉化為FormData形式

4. 設定請求頭

Axios 是一個基於 promise 的 HTTP 庫，可以用在瀏覽器和 node.js 中。

1. 安裝並引入axios

1.1 使用 npm/cnpm 安裝

npm install axios --save-dev
 

1.2 在main.js檔案中引入axios

import axios from 'axios'

// 目前在其它的元件中是無法使用axios的，可以在main.js檔案中進行配置：
Vue.prototype.$http= axios

// 這樣配置以後，就可以在函式中直接用this.$http代替axios，如：
this.$http.post(url, {xx:xxx}).then()

2. 使用axios請求本地json檔案

使用axios請求本地檔案的時候需要注意以下兩點：

（1）本地的json檔案必須放置在static/靜態資料夾下；

（2）請求的時候需要使用get方法，而不是post；使用post的話會報404錯誤。

  methods: {
    getRechargeList() {
      let that = this;
      this.$http.get('/static/data/getRecharge.json')
      .then(function (res) {
        console.log(res.data)  // res.data 即為所請求到的資料
      })
      .catch(function (err) {
        console.log(err);
      });

    }
  },

3. 將傳遞的json資料轉為FormData

        利用axios 的post請求傳遞資料時：axios.post(url, {xx:xxx}).then()，會發現引數錯誤，用谷歌除錯工具除錯發現我們傳的值變成了一個物件，而不是我們平常的引數傳遞形式。想要通過axios傳送鍵值對，其實是需要做響應處理的，將傳入的資料格式轉化為FormData形式的鍵值對。

3.1 引入qs

qs是一個npm倉庫所管理的包，可以用於URL形式和物件/陣列等形式之間的轉換。

npm install --save axios vue-axios qs

# 只引入qs
npm install qs

使用示例：

// qs.stringify(obj)將物件解析成URL的形式；
let obj = {
    user: "xmj",
    id: "85",
    token: "123456789"
}
qs.stringify(obj);

// qs.parse(url)將URL解析成物件的形式；
let url = 'user=xmj&id=85&token=123456789';
Qs.parse(url);

3.2 新增請求攔截器，將axios引數轉化為FormData形式

//main.js 檔案

import axios from 'axios'
import qs from 'qs'

// 新增請求攔截器
axios.interceptors.request.use(function (config) {
    if(config.method!='get'){
        config.data=qs.stringify(config.data);
    }
    config.headers['Content-Type'] = 'application/x-www-form-urlencoded';
    return config;
},function (error) {
    return Promise.reject(error)
})
 
// 新增響應攔截器
axios.interceptors.response.use(function (response) {
    // 對響應資料進行處理
    // ...

    return response;
}, function (error) {
    // 對響應錯誤進行處理
    // ...

    return Promise.reject(error);
});

4. 設定請求頭

        有些時候，我們通過token判斷登入狀態，需要在每次請求的時候將token帶上，需要設定請求頭，方法和上面配置Content-Type方法相同。

//main.js
import axios from 'axios'
import qs from 'qs'
// 新增請求攔截器
axios.interceptors.request.use(function (config) {
    if(config.method!='get'){
        config.data=qs.stringify(config.data);
    }
    config.headers['Content-Type'] = 'application/x-www-form-urlencoded';
    let token = window.sessionStorage.getItem("TOKEN");
    if(token) {
        config.headers.common['checkinfo'] = token;
    }
    return config;
},function (error) {
    return Promise.reject(error)
})
 
// 新增響應攔截器
axios.interceptors.response.use(function (response) {
    // 對響應資料進行處理
    // ...

    return response;
}, function (error) {
    // 超時，重新登入
    if(error.response&&error.response.data.errcode==500){
         ElementUI.Message({
             type:'warning',
             message:"身份過期，請重新登入",
             onClose:function(){
                 sessionStorage.removeItem('TOKEN')
                 router.push('/login')
            }
        });
    }
    return Promise.reject(error);
});