vue-cli項目中axios的配置文件

./src/api/index.js
首先引入axios，引入配置好的路由，並配置響應攔截器

import axios from "axios";
import router from "../router";
// http 響應攔截器
axios.interceptors.response.use(
  response => {
    // 對響應數據做處理
    return response;
  },
  error => {
    if (error.response) {
	  switch (error.response.status) {
		case 401:
		  router.push({
			path:'./login'
		  })
	  }
	}
	return Promise.reject(error);
  }
)

狀態碼401是對身份的驗證，如果驗證失敗，需要跳轉到登陸頁面。

配置請求攔截器

axios.interceptors.request.use(
  config => {
    if( localStorage.getItem('token') ){
	  config.headers.Authorization = localStorage.getItem('token')
	}
    return config;
  },
  error => {
    return Promise.reject(error);
  }
)

如果本地存儲存在token（如果token存入了vuex的store就從store取），每請求前在參數的headers.Authorization中存入token。

寫一個創建請求時的配置

let qs from 'qs';
let config = {
  baseURL: process.env.VUE_APP_BASEURL,
  method: "get",
  headers: {
    "Content-Type": "application/x-www-form-urlencoded"
  },
  transformRequest: [
    function(data) {
      // 由於使用的form-data傳數據所以要格式化
      data = qs.stringify(data);
      return data;
    }
  ]
};

• process.env.VUE_APP_BASEURL是vue-cli自己手動配置的值。
• transformRequest允許在向服務器發送前，修改請求數據，只能用在 'PUT', 'POST' 和 'PATCH' 這幾個請求方法，后面數組中的函數必須返回一個字符串，或 ArrayBuffer，或 Stream。
• qs 是一個增加了一些安全性的查詢字符串解析和序列化字符串的庫。

寫一個測試接口調用

//測試接口調用
export const getTestData = params => {
  return axios.post("getTestData", params, config).then(res => res.data);
};

接口調用可以全寫在'./src/api/index.js'這個文件中，也可以獨立出來。