vue axios----基於 Promise 的 HTTP 請求

vue axios
vue2.0之axios接口請求管理
功能特性
axios API
開始使用
get請求
post請求
多個請求並發
攔截器
移除一個攔截器：
自定義的 axios 實例添加攔截器：
vue2.0之axios接口請求管理
基於 Promise 的 HTTP 請求客戶端，可同時在瀏覽器和 node.js 中使用

Vue 原本有一個官方推薦的 ajax 插件 vue-resource，但是自從 Vue 更新到 2.0 之后，尤雨溪宣布停止更新vue-resource，並推薦大家使用axios之后，越來越多的 Vue 項目，都選擇 axios 來完成 ajax 請求，而大型項目會使用 Vuex 來管理數據

功能特性
1.在瀏覽器中發送 XMLHttpRequests 請求
2.在 node.js 中發送 http請求
3.支持 Promise API
4.攔截請求和響應
5.轉換請求和響應數據
6.自動轉換 JSON 數據
7.客戶端支持保護安全免受 XSRF 攻擊

axios API
axios.get(url[, config])
axios.delete(url[, config])
axios.head(url[, config])
axios.post(url[, data[, config]])
axios.put(url[, data[, config]])
axios.patch(url[, data[, config]])

注意
當使用別名方法時， url、 method 和 data 屬性不需要在 config 參數里面指定。

開始使用
vue 本身是不支持 ajax 接口請求的，所以我們需要安裝一個接口請求的 npm 包，來使我們的項目擁有這個功能。
way1.首先在主入口文件main.js中引用

import axios from 'axios'
import VueAxios from 'vue-axios'

Vue.use(VueAxios,axios);

　　在組件文件中的methods里去使用

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

　　way2.axios 改寫為 Vue 的原型屬性
首先在主入口文件main.js中引用，之后掛在vue的原型鏈上

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

　　在組件中使用

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

　　way3.結合 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

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

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

　　

get請求

寫法如下：

axios.get('/detail?id=10').then(function (res) {
    //成功獲取數據
   console.log(res);
 }).catch(function (err) {
    //請求錯誤
   console.log(err);
 });

　　

get請求也可以通過 params 對象傳遞參數。寫法如下：

 axios.get('/detail', {
    //參數
   params: {
        id: 10
    }
 }).then(function (res) {
    //成功獲取數據
    console.log(res);
 }).catch(function (err) {
    //請求錯誤
    console.log(err);
 });

　　

post請求

寫法如下：

/執行post請求
 axios.post('/add', {
    name: 'haqiu',
    age: 26
 }).then(function (res) {
    //請求成功
  console.log(res);
 }).catch(function (err) {
    //請求失敗
  console.log(err);
 });

　　

多個請求並發

除了最常用的get請求和post請求以外，值得一提的是axios提供了一次性並發多個請求的API，使用方法如下：

function getProfile(){
    //請求1
    return axios.get('/profile');
 }
 function getUser(){
    //請求2
    return axios.get('/user');
 }
 //並發請求
 axios.all([
    getProfile(),
    getUser()
 ]).then(axios.spread((res1, res2)=>{
    //兩個請求現已完成
   console.log(res1);
    console.log(res2);
 }));

　　

攔截器

你可以在處理 then 或 catch 之前攔截請求和響應

// 添加一個請求攔截器
axios.interceptors.request.use(function (config) {
    // Do something before request is sent
    return config;
  }, function (error) {
    // Do something with request error
    return Promise.reject(error);
  });
 
// 添加一個響應攔截器
axios.interceptors.response.use(function (response) {
    // Do something with response data
    return response;
  }, function (error) {
    // Do something with response error
    return Promise.reject(error);
  });

　　

移除一個攔截器：

var myInterceptor = axios.interceptors.request.use(function () {/*...*/});
axios.interceptors.request.eject(myInterceptor);

　　

自定義的 axios 實例添加攔截器：

var instance = axios.create();
instance.interceptors.request.use(function () {/*...*/});