本文實例講述了vue簡單封裝axios插件和接口的統一管理操作。分享給大家供大家參考，具體如下：

現在很多公司的項目都是前后端分離的項目，那么說到前后端分離，必定會有ajax請求來獲得后臺的數據。

在做jquery項目的時候，我們都會使用它封裝好的方法來直接發起ajax請求。

在vue項目中，我們使用最多的就是axios這個插件，下面就簡單的封裝下這個插件并且把接口給統一化管理。

一、安裝和配置

1.在項目根目錄下打開終端安裝

npm install axios -S

2.安裝完成以后，在src目錄下創建utils目錄，用來存放用到的所有工具和插件（個人習慣）

3.在utils目錄創建request.js文件，用來配置axios，代碼如下：

import axios from 'axios' //引入axiosconst service = axios.create({ // api 的 baseUrl 就是每個請求前面相同的地址，這個地方因為我配置了環境，所以直接取環境里的配置 baseURL: process.env.BASE_URL, timeout: 5000 // 請求超時時間})// request攔截器service.interceptors.request.use( config => {  //這里是每個請求的設置，比如每個請求都攜帶一個token，或者當為post請求時，引入qs格式化參數。  return config }, error => {  console.log('請求失敗:' + error)  Promise.reject(error) })// response 攔截器service.interceptors.response.use( response => {  const res = response.data  //這個地方的code自己與后臺約定(可以根據狀態碼，設置自己要提示的信息)  if (res._code !== '10000') {   //在此可以加幾種比較普遍的設置，然后可以把單獨的返到頁面中設置   return Promise.reject(res)  } else {   return response.data  } }, error => {  console.log('響應失敗:' + error)  return Promise.reject(error) })export default service

二、使用

1.在src目錄下創建api文件夾，api文件夾與頁面文件夾目錄結構相同，名字最好也其相同語義的名字（個人習慣，方便管理）

2.比如我的頁面結構里有個manage目錄，里面有個user.vue頁面，那么相同的在api目錄下，也應有個manage目錄，里面有個user.js文件

3.user.js代碼如下：

//引入配置好的axiosimport request from '@/utils/request'//獲取用戶列表export const getUserList = params => { return request({ url: '你的接口地址', method: 'get', params }) }//增加用戶export const addUser = data => { return request({ url: '你的接口地址', method: 'post', data }) }//刪除用戶export const delUser = data => { return request({ url: '你的接口地址', method: 'post', data }) }//修改用戶信息export const addUserInfo = data => { return request({ url: '你的接口地址', method: 'post', data }) }//查詢用戶詳細信息export const getUserDetail = params => { return request({ url: '你的接口地址', method: 'get', params }) }