// 配置API介面地址與伺服器靜態檔案地址
var root = 'http://127.0.0.1:3000/';
// 引用axios
var axios = require('axios')
var qs = require('qs')

axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded;charset=UTF-8'
//全域性封裝錯誤處理函式
axios.interceptors.request.use(
  config => {
    config.headers = {
      'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8'
    };
    // 在post請求傳送出去之前，對其進行編碼
    if (config.method === 'post') {
      config.data = qs.stringify(config.data);
    }
    return config;
  },
  err => {
    return Promise.reject(err);
  });
// http response 攔截器
axios.interceptors.response.use(
  response => {
    return response;
  },
  error => {
    if (error.response) {
      console.log("請求錯誤", error.response.status);
      switch (error.response.status) {
        case 401:
          // store.dispatch('logout');
          console.log("401");
          break;
        case 404:
          console.log('介面不存在');
          break;
        case 500:
          console.log('伺服器錯誤');
      }
    }
    return Promise.reject(error);// 返回介面返回的錯誤資訊
  });
function getdata(method, url, params, success, failure) {
  axios({
    method: method,
    url: url,
    data: method === 'POST' || method === 'PUT' ? params : null,
    params: method === 'GET' || method === 'DELETE' ? params : null,
    baseURL: root,
    withCredentials: true, //跨域請求憑證驗證。
    timeout: 30000
  })
    .then(function (res) {
      success(res.data);
    })
    .catch(function (err) {
      let res = err.response
      if (err) {
        console.log('api error, HTTP CODE: ' + res.status)
        failure(err.response.statusText)
        return
      }
    })
}
// 返回在vue模板中的呼叫介面
export default {
  get: function (url, params, success, failure) {
    return getdata('GET', url, params, success, failure)
  },
  post: function (url, params, success, failure) {
    return getdata('POST', url, params, success, failure)
  },
  put: function (url, params, success, failure) {
    return getdata('PUT', url, params, success, failure)
  },
  delete: function (url, params, success, failure) {
    return getdata('DELETE', url, params, success, failure)
  },
  root: root

}

 

post請求需要qs模組進行編碼，不然後臺接收到資料還需要處理，編碼前後後臺接收到的資料格式如下（後臺語言為nodejs）

封裝完成後需要在main.js進行引用。引用的程式碼如下。

import api from './api/index' //封裝axios方法js的地址 


Vue.prototype.$api = api  //裝載到vue例項上方便呼叫

呼叫方法

 this.$api.post(
        "post",
        {id:1,name:"142adasdlkjasd"},
        response => {
          console.log(response);
           
        },
        err=> {
          console.log(err);
        }
      );
    }