Vue交互——axios && vue-resource常用配置

axios

首先安裝依賴：

cnpm install axios -D

在main.js中引入：

import axios from "axios";

在vue中使用axios進行交互時，axios提供了一些可配置項來方便管理，以下作部分記錄以便後續使用

一般在進行交互（發送請求）時，爲了用戶友好，會有loading的效果，可通過axios進行統一配置

發送請求數據的時：

axios.interceptors.request.use(
  function(config) {
    store.dispatch("showLoading");//通過VUEX管理是否顯示loading
    return config;
  },
  function(error) {
    return Promise.reject(error);
  }
);

請求結束回來時：

axios.interceptors.response.use(
  function(response) {
    store.dispatch("hideLoading");
    return response;
  },
  function(error) {
    return Promise.reject(error);
  }
);

post請求設置默認頭部信息:

axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';

axios.defaults.headers.common['Authorization'] = AUTH_TOKEN;

配置請求的根路徑：

axios.defaults.baseURL = (process.env.NODE_ENV !=='production' ? config.dev.httpUrl:config.build.httpUrl)

例如：

axios.defaults.baseURL='http://localhost:8082/

掛載/暴露到VUE原型上，以便其他頁面使用：

Vue.prototype.$http = axios;

常用配置：

//config
import Qs from 'qs'
{
 //請求的接口，在請求的時候，如axios.get(url,config);這裏的url會覆蓋掉config中的url
 url: '/user',
 // 請求方法同上
 method: 'get', // default
 // 基礎url前綴
 baseURL: 'https://some-domain.com/api/',
　　
　　　　
 transformRequest: [function (data) {
  // 這裏可以在發送請求之前對請求數據做處理，比如form-data格式化等，這裏可以使用開頭引入的Qs（這個模塊在安裝axios的時候就已經安裝了，不需要另外安裝）
　　data = Qs.stringify({});
  return data;
 }],
 transformResponse: [function (data) {
  // 這裏提前處理返回的數據
  return data;
 }],
 // 請求頭信息
 headers: {'X-Requested-With': 'XMLHttpRequest'},
 //parameter參數
 params: {
  ID: 12345
 },
 //post參數，使用axios.post(url,{},config);如果沒有額外的也必須要用一個空對象，否則會報錯
 data: {
  firstName: 'Fred'
 },
 //設置超時時間
 timeout: 1000,
 //返回數據類型
 responseType: 'json', // default
}

其他頁面使用時，可直接寫爲：

this.$http.get(url).then(res=>{
//成功操作
}).catch(error=>{
//失敗操作
})

vue-resource

首先要安裝vue-resource:

cnpm install vue-resource -D

在main.js中引入並使用：

import VueResource from "vue-resource";
Vue.use(VueResource);

請求前後配置，比如請求前顯示loading,請求後消失：

Vue.http.interceptors.push((request, next) => {
  store.dispatch("showLoading");
  next(response => {
    store.dispatch("hideLoading");
    return response;
  });
});

在其他組件中可以直接通過以下方式調用：

this.$http.get();

get請求：

this.$http.get('/someUrl', [options]).then(function(response){
    // 響應成功回調
}, function(error){
    // 響應錯誤回調
});

post請求：

this.$http.get('/someUrl',params, [options]).then(function(response){
    // 響應成功回調
}, function(error){
    // 響應錯誤回調
});