axios在vue中的應用（一）—— 簡單調用

目錄

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);
});