你是不是還在vue項(xiàng)目中像下面代碼一樣使用axios呢，如果是，那你應(yīng)該考慮換種更酷的方式，將axios單獨(dú)封裝一下，讓你少些很多沒必要的代碼。

methods: {
    getData () {
      axios.get('http://xxx.com/api/data',{uuid: 1}).then(response => {
        let result = response.data
        ...
      })
    }
  },

??????上面的寫法是完全ok的，只是每次都要調(diào)用一長(zhǎng)串的axios鏈條，不太方便，我們可以考慮將axios封裝一下，當(dāng)請(qǐng)求通過封裝層時(shí)，直接返回的就是我們想要的數(shù)據(jù)，我們不必每次都是要寫大量的過濾數(shù)據(jù)的操作。
??????好在axios提供給我們了豐富的api，其中就有一個(gè)api axios.interceptors,我們稱之為攔截器，它可以在瀏覽器網(wǎng)絡(luò)進(jìn)程發(fā)起網(wǎng)絡(luò)請(qǐng)求之前和客戶端接收到服務(wù)器返回的之后的第一時(shí)間點(diǎn)，對(duì)發(fā)送時(shí)要傳遞的數(shù)據(jù)和接受到的數(shù)據(jù)進(jìn)行一些處理，方便我們后續(xù)業(yè)務(wù)的開發(fā)。
話不多說，我們直接來看代碼吧。
創(chuàng)建axios.config.js文件

// axios 配置
import Vue from 'vue'
import axios from 'axios'

// 設(shè)置 axios 請(qǐng)求的 baseURL
axios.defaults.baseURL = 'http://www.xxx.com'

/**
 * 設(shè)置攔截器，interceptors 響應(yīng)處理
 * 所有使用 axios 的請(qǐng)求響應(yīng)，都會(huì)優(yōu)先回調(diào)到攔截器中
 * 在正確的返回情況下，數(shù)據(jù)會(huì)優(yōu)先進(jìn)入第一個(gè)回調(diào)方法
 * 在請(qǐng)求錯(cuò)誤的情況下，錯(cuò)誤會(huì)進(jìn)入第二個(gè)回調(diào)函數(shù)
 */

axios.interceptors.response.use((response) => {
    // 統(tǒng)一處理數(shù)據(jù)
    return response.data;
}, (error) => {
    // 處理錯(cuò)誤響應(yīng)
    return Promise.reject(error)
})

// 綁定到vue原型中，組件中： this.$http -> axios
Vue.prototype.$http = axios

在main.js中引入axios.config.js

import '@js/axios.config.js'

在組件中使用$http

methods: {
    getData () {
      this.$http.get('/getInfo')
        .then(data => {
          console.log(data)
        }).catch(err => {
          console.log(err)
        })
    }
  },

??????哈哈，不管是裝逼，還是偷懶，都挺不錯(cuò)的。當(dāng)然，我們當(dāng)前設(shè)置的攔截功能并不完整。我們只設(shè)置了對(duì)響應(yīng)后的處理，其實(shí)我們對(duì)發(fā)送請(qǐng)求之前的處理更具有實(shí)際的意義。比如，可以實(shí)現(xiàn)的預(yù)處理有：token傳遞，數(shù)據(jù)糾正等等功能。以一言蔽之，只有是大多數(shù)請(qǐng)求都要需求處理，我們就可以將相應(yīng)的功能封裝到攔截器當(dāng)中。

這里再補(bǔ)充一個(gè)小點(diǎn)，那就行使用axios.all()一次性發(fā)起多個(gè)網(wǎng)絡(luò)請(qǐng)求，這種方式跟單個(gè)請(qǐng)求一起發(fā)送是一樣的，但是，再編寫代碼的時(shí)候會(huì)更具有封裝性。代碼如下：

methods: {
    getData () {
      this.$http.all([
        this.$http.get('/swiper'),
        this.$http.get('/activitys')
      ]).then(this.$http.spread(swiperData, activityData) => {
        this.swiperDatas = swiperData.list;
        this.activityDatas = data.list; 
      })
    }
  }

本文會(huì)持續(xù)更新。。。