還是直奔主題吧，因為官方不推薦使用vue-resource，而是推薦axios，所以這篇文章分享給大家我在自己的專案裡如何封裝axios，雖說將axios在main.js裡寫入Vue的原型鏈作為Vue的屬性（Vue.prototype.$http = axios），直接用最原始的方法也能進行請求

this.$http.get('/user',{
  params:{
    ID:12345
  }
})
.then(function(response){
  console.log(response);
})
.catch(function(err){
  console.log(err);
});
 

  這樣也不是說不可以，但是真的在開發工作中，因為要統一設定請求的攔截，錯誤的處理，所以封裝axios是十分必要的。
  首先這是我src下api的目錄

  這是apiUrl.js，將我們的請求名稱和url以及方法放在這裡

export default {
  login_in: { url: '/login', method: 'get' },
  getUserList: { url: '/user/list', method: 'get' }
}

  重點在於我們的apiUtil.js

import axios from 'axios'
import { Toast } from 'mint-ui'
 


const generateApiMap = (map) => {
  let facade = {}
  _.forEach(map, function (value, key) {
    facade[key] = toMethod(value)
  })
  return facade
}

const toMethod = (options) => {
  options.method = options.method || 'post'
  return (params = {}, attachedParams, config = {}) => {
    params = _.extend(params, attachedParams)
    return
 
 sendApiInstance(options.method, options.url, params, config)
  }
}

// 建立axios例項
const createApiInstance = (config = {}) => {
  const _config = {
    withCredentials: true, // 跨域
    baseURL: ''
  }
  config = _.merge(_config, config)
  return axios.create(config)
}

const err_check = (code, message, data) => {
  if (code ==200){
    return true
  }
  return false
}

const sendApiInstance = (method, url, params, config = {}) => {
  if(!url){
    return
  }
  let instance = createApiInstance(config)

  instance.interceptors.response.use(response => {
    let {code, message, data} = response.data
    if (err_check(code, message, data) && data) {
      return Promise.resolve(data)
    } else {
      return Promise.reject(data)
    }
  },
  error => {
    Toast({
      message: error.response || error.message,
      duration: 3000
    })
    return Promise.reject(error).catch(res => {
        console.log(res)
      })
  }
  )
  if (method === 'get') {
    params = {
      params: params
    }
  }

  return instance[method](url, params, config)
}

export default {
  generateApiMap
}

  緊接著是index.js

import apiUrl from './apiUri'
import apiUtil from './apiUtil'

const generateApiMap = apiUtil.generateApiMap({...apiUrl})
export default {
  ...generateApiMap // 取出所有可遍歷屬性賦值在新的物件上
}

  可以看出來整體的想法就是在apiUrl.js裡面只放請求名稱以及url和請求方法，然後再apiUtil.js裡面去將其轉換為相應的方法，首先是在index.js裡面呼叫generateApiMap，遍歷我們的apiUrl將其中每個物件轉換為方法，也就是toMethod要做的事，緊接著在sendApiInstance裡去建立我們的axios例項，並設定攔截器（我只做了返回攔截），到return instance[method](url, params, config)這一步也就將我們的請求封裝成功，下面是在頁面呼叫的時候

  封裝axios的方式有很多種，每個人的程式碼習慣也不一樣，此處也只是給大家一個參考