Vue 中使用axios 處理請求數據

安裝就不過多講解了，請移步至 axios 學習文檔

仔細看看文檔，就知道axios 是一個基於 promise 的 HTTP 庫，axios並沒有install 方法，所以是不能使用vue.use()方法的。☞查看 Vue 插件
那么難道我們要在每個文件都要來引用一次axios嗎？多繁瑣！！！解決方法有很多種：

1. 結合 vue-axios使用
2. axios添加到 Vue 的原型屬性
3. 結合 Vuex的action

1.結合 vue-axios使用

vue-axios，它是按照vue插件的方式去寫的。那么結合vue-axios，就可以去使用vue.use方法了，首先在主入口文件main.js中引用：

import axios from axios'
import Vueaxios from vue-axios

Vue . use ( Vueaxios , axios )

之后就可以使用了，在組件文件中的methods里去使用了：

getNewsList(){
  this.axios.get('api/getNewsList').then((response)=>{
    this.newsList=response.data.data;
  }).catch((response)=>{
    console.log(response);
  })
}

2.axios 改寫為 Vue 的原型屬性（不推薦這樣用）

首先在主入口文件main.js中引用，之后掛在vue的原型鏈上：

import axios from axios'
Vue.prototype.$axios = axios

在組件中使用：

this.$axios.get('api/getNewsList')
  .then(response)=>{
    this.newsList=response.data.data;
  }).catch(response)=>{
    console.log(response);
  })

3. 結合 Vuex的action

在vuex的倉庫文件store.js中引用，使用action添加方法

import Vue from 'Vue'
import Vuex from 'vuex'

import axios from 'axios'

Vue.use(Vuex)
const store = new Vuex.Store({
  // 定義狀態
  state: {
    user: {
      name: 'xiaoming'
    }
  },
  actions: {
    // 封裝一個 ajax 方法
    login (context) {
      axios({
        method: 'post',
        url: '/user',
        data: context.state.user
      })
    }
  }
})

export default store

axios 處理get 、 post 請求

created發送請求

// created:vue生命周期中的鈎子函數，在這個時間點，data中的數據已經注入到響應式系統中
created(){
    axios.get('api/getData.php',{       // 還可以直接把參數拼接在url后邊
        params:{
            title:'眼鏡'
        }
    }).then(function(res){
        this.goodsList = res.data;
    }).catch(function (error) {
        console.log(error);
    });
}

在組件中發送請求的時候，需要使用 this.$store.dispatch

mtehods:{
  submitForm (){
    this.$store.dispatch('login')
  }
}

發送POST請求

axios.post('/user', {
    firstName: 'Fred',
    lastName: 'Flintstone'
}).then(function (response) {
    console.log(response);
}).catch(function (error) {
    console.log(error);
});

// 注意: 如果發送請求時，發現傳遞的參數是對象，那么可用如下方式傳參數
// var params = new URLSearchParams();
// params.append('title', '眼鏡');
// params.append('id',1);
// axios.post('/user', params)
//      .then(function(res){})
//      .catch(function(error){});

請求攔截器和響應攔截器

//請求攔截器
axios.interceptors.request.use(
  function (config) {
      // 在發送請求之前做些什么
      return config;
  },
  function (error) {
      // 對請求錯誤做些什么
      return Promise.reject(error);
  }
);

//響應攔截器
axios.interceptors.response.use(
  function (config) {
      // 對響應數據做點什么
      return config;
  },
  function (error) {
      // 對響應錯誤做點什么
      return Promise.reject(error);
  }
);

Vue中axios在發送POST請求時，參數的處理

post請求參數的兩種格式：

form-data:?name=iwen&age=10
x-www-form-urlencoded:{name:'iwen',age:20}

注意：axios接收的post請求參數的格式是form-data格式,所以需要使用插件“qs”，將請求參數轉換為form-data格式。如下：

1. 下載安裝第三方模塊 qs -> npm install qs --save-dev
2. 處理方式

// 第一種: 在vue組件中，直接在發送的時候，對數據進行qs.stringify處理
// 缺點: 如果項目大，有大量的請求需要發送，那么一個一個加會很麻煩
axios.post("/checkLogin.php", qs.stringify({
  name:'tom',
  pwd:12345
}));

// 第二種:在 main.js 中，使用axios.create創建一個新的axios實例，統一對數據進行處理, 同時也要借助qs模塊
const Axios = axios.create({
  baseURL: '/api',
  transformRequest: [function (data) {
    const d = qs.stringify(data)
    return d;
  }]
})
//在vue組件中就可以直接傳json了
Axios.post("/checkLogin.php", {
  name:'tom',
  pwd:12345
});

// 第三種：在main.js中，使用axios攔截器處理數據，實例應用：在post請求的時候需要將請求參數進行轉換，這個操作可以在攔截器中處理，這樣在單獨的組件中，請求參數就不需要處理了。如下：
import qs from 'qs'

Axios.interceptors.request.use(function (config) {
  // 在發送請求之前做些什么
  console.log(config)
  if(config.method === 'post'){
  //將請求參數進行轉換，這里是全局配置post請求參數
    config.data = qs.stringify(config.data)
  }
  return config;
}, function (error) {
  // 對請求錯誤做些什么
  return Promise.reject(error);
});

//在vue組件中就可以直接傳json了
Axios.post("/checkLogin.php", {
  name:'tom',
  pwd:12345
});