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 () {/*...*/});