import axios from 'axios' //引用axios
import {Promise} from 'es6-promise' //引入Promise
// axios 配置
axios.defaults.timeout = 5000; //設(shè)置超時(shí)時(shí)間
axios.defaults.baseURL = 'http://localhost:4000/api/v1/'; //這是調(diào)用數(shù)據(jù)接口
// http request 攔截器（所有發(fā)送的請(qǐng)求都要從這兒過(guò)一次），通過(guò)這個(gè)，我們就可以把token傳到后臺(tái)，我這里是使用sessionStorage來(lái)存儲(chǔ)token等權(quán)限信息和用戶信息，若要使用cookie可以自己封裝一個(gè)函數(shù)并import便可使用
axios.interceptors.request.use(
 config => {
  const token = sessionStorage.getItem("token"); //獲取存儲(chǔ)在本地的token
  config.data = JSON.stringify(config.data);
  config.headers = {
   'Content-Type':'application/json' //設(shè)置跨域頭部,雖然很多瀏覽器默認(rèn)都是使用json傳數(shù)據(jù)，但咱要考慮IE瀏覽器。
  };
  if (token) {
   config.headers.Authorization = "Token " + token; //攜帶權(quán)限參數(shù)
  }
  return config;
 },
 err => {
  return Promise.reject(err);
 }
);


// http response 攔截器（所有接收到的請(qǐng)求都要從這兒過(guò)一次）
axios.interceptors.response.use(
 response => {
//response.status===401是我和后臺(tái)約定的權(quán)限丟失或者權(quán)限不夠返回的狀態(tài)碼，這個(gè)可以自己和后臺(tái)約定，約定返回某個(gè)自定義字段也是可以的
  if(response.status == 401) {
   router.push({ //push后面是一個(gè)參數(shù)對(duì)象，可以攜帶很多參數(shù)，具體可以去vue-router上查看，例如query字段表示攜帶的參數(shù)
    path: '/login' 
   })
  }
  return response;
 },
 error => {
  return Promise.reject(error.response.data)
 });

export default axios;

/**
 * fetch 請(qǐng)求方法
 * @param url
 * @param params
 * @returns {Promise}
 */
export function fetch(url, params = {}) {
 return new Promise((resolve, reject) => {
  axios.get(url, {
   params: params
  })
  .then(response => {
   resolve(response.data);
  })
  .catch(err => {
   reject(err)
  })
 })
}

/**
 * post 請(qǐng)求方法
 * @param url
 * @param data
 * @returns {Promise}
 */
export function post(url, data = {}) {
 return new Promise((resolve, reject) => {
  axios.post(url, data)
   .then(response => {
    resolve(response.data);
   }, err => {
    reject(err);
   })
 })
}

/**
 * patch 方法封裝
 * @param url
 * @param data
 * @returns {Promise}
 */
export function patch(url, data = {}) {
 return new Promise((resolve, reject) => {
  axios.patch(url, data)
   .then(response => {
    resolve(response.data);
   }, err => {
    reject(err);
   })
 })
}

/**
 * put 方法封裝
 * @param url
 * @param data
 * @returns {Promise}
 */
export function put(url, data = {}) {
 return new Promise((resolve, reject) => {
  axios.put(url, data)
   .then(response => {
    resolve(response.data);
   }, err => {
    reject(err);
   })
 })
}

import axios from 'axios' //引用axios
import {Promise} from 'es6-promise' //引入Promise
// axios 配置和攔截器都不用了，這里我使用了一個(gè)動(dòng)態(tài)配置數(shù)據(jù)請(qǐng)求地址，在App.vue中，代碼在下面，這個(gè)也不是必須的。
//^_^下面都設(shè)置一個(gè)默認(rèn)的頭部，使用的時(shí)候可以傳入數(shù)據(jù)覆蓋^_^,例如使用fetch(GET)方法時(shí)，沒(méi)有請(qǐng)求數(shù)據(jù)，但是請(qǐng)求頭有變化，則應(yīng)寫(xiě)成 fetch("地址", {}, {"這里寫(xiě)頭部的內(nèi)容"}) 記住沒(méi)數(shù)據(jù)用一個(gè)空對(duì)象占位置
/**
 * fetch 請(qǐng)求方法
 * @param url
 * @param params
 * @returns {Promise}
 */
export function fetch(url, params = {}, headers = {
 'Content-Type': 'application/json', //設(shè)置跨域頭部
 "Authorization": 'JWT ' + sessionStorage.getItem("authToken")
}) {

 return new Promise((resolve, reject) => {
  axios.get(url, {
   params: params,
   headers: headers
  })
  .then(response => {
   resolve(response.data);
  })
  .catch(err => {
   reject(err.response)
  })
 })
}

/**
 * post 請(qǐng)求方法
 * @param url
 * @param data
 * @returns {Promise}
 */
export function post(url, data = {}, config = {
 "headers": {
  'Content-Type': 'application/json', //設(shè)置跨域頭部
  "Authorization": 'JWT ' + sessionStorage.getItem("authToken")
 }
}) {
 return new Promise((resolve, reject) => {
  axios.post(url, data, config)
   .then(response => {
    resolve(response.data);
   }, err => {
    reject(err.response);
   })
 })
}

/**
 * patch 方法封裝
 * @param url
 * @param data
 * @returns {Promise}
 */
export function patch(url, data = {}, config = {
 "headers": {
  'Content-Type': 'application/json', //設(shè)置跨域頭部
  "Authorization": 'JWT ' + sessionStorage.getItem("authToken")
 }
}) {
 return new Promise((resolve, reject) => {
  axios.patch(url, data, config)
   .then(response => {
    resolve(response.data);
   }, err => {
    reject(err.response);
   })
 })
}

/**
 * put 方法封裝
 * @param url
 * @param data
 * @returns {Promise}
 */
export function put(url, data = {}, config = {
 "headers": {
  'Content-Type': 'application/json', //設(shè)置跨域頭部
  "Authorization": 'JWT ' + sessionStorage.getItem("authToken")
 }
}) {
 return new Promise((resolve, reject) => {
  axios.put(url, data, config)
   .then(response => {
    resolve(response.data);
   }, err => {
    reject(err.response);
   })
 })
}

<template>
 <div id="app">
 <router-view/>
 </div>
</template>

<script>
import axios from 'axios';
let protocol = window.location.protocol; //協(xié)議
let host = window.location.host; //主機(jī)
let reg = /^localhost+/;
if(reg.test(host)) {
 //若本地項(xiàng)目調(diào)試使用
 axios.defaults.baseURL = 'http://10.0.xx.xxx:xxxx/api/';
} else {
 //動(dòng)態(tài)請(qǐng)求地址
 axios.defaults.baseURL = protocol + "http://" + host + "/api/";
}
axios.defaults.timeout = 30000;
export default {
 name: 'app',
 axios //這里記得導(dǎo)出，若請(qǐng)求地址永久固定一個(gè)，則就按照`普通版`配置一個(gè)baserURL就可以了
}
</script>

<style lang="scss"> //這里我使用的是scss
@import '~@/style/style'
</style>