vue項目實戰：api管理和封裝

/* * @Description: api aixos的二次封裝 request.js * @Version: 2.0 * @Autor: lhl * @Date: 2020-07-14 16:12:35 * @LastEditors: lhl * @LastEditTime: 2020-08-20 17:08:27 */ import Vue from 'vue'; import axios from 'axios'; import store from '../store/index' import qs from 'qs'; // axios自帶模塊 若報錯找不到重新安裝即可

// 全局的 axios 默認值 // axios.defaults.baseURL = 'https://api.example.com'; // axios.defaults.headers.common['Authorization'] = AUTH_TOKEN; // axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';


// 使用自定義配置新建一個 axios 實例
const instance = axios.create({ baseURL: 'api', // process.env.BASE_API, // api的 base_url
  timeout: 100000, // 10s 請求超時時間
  // headers: 'xx'
}) // 請求攔截器(全局) // Authorization-token: xxx-token
instance.interceptors.request.use(config => { console.log(config, '請求攔截器') const token = store.state.user.token; // console.log(token,'token請求攔截器')
  // const token = 'xxx-token';
  token && (config.headers['Authorization-token'] = token); config.withCredentials = true
  if (config.headers['Content-Type'] === 'application/json') { config.data = JSON.stringify(config.data) } if (config.headers['Content-Type'] === 'multipart/form-data') { return config } if (config.method === 'post' || config.method === 'put' || config.method === 'delete') { if (typeof (config.data) !== 'string') { config.data = qs.stringify(config.data) } } return config }, error => { return Promise.reject(error) }) // 響應攔截器(全局)
instance.interceptors.response.use(response => { console.log(response, '響應攔截器') // 把axios的data層去掉原本（res.data.xx） 直接使用數據就可以res.xx即可
  return response.data }, error => { return Promise.reject(error) }) export default instance // 使用axios在調用后台接口超時或是報某個特性的錯誤碼時，需要重新發送請求。此時用到一個第三方的庫：axios-retry解決了這個問題

// npm install axios-retry

// import axiosRetry from 'axios-retry';

// //配置axios // axiosRetry(axios, {  // retries: 3, //設置自動發送請求次數 // retryCondition: (error)=>{ // //true為打開自動發送請求，false為關閉自動發送請求 // //這里的意思是當請求方式為get時打開自動發送請求功能 // return (error.config.method === 'get'); // } // });

/* * @Description: 所有api的入口文件 index.js 將來 main.js 引入掛載 vue原型上面 方便統一管理無需各種 import * @Version: 2.0 * @Autor: lhl * @Date: 2020-07-20 10:18:58 * @LastEditors: lhl * @LastEditTime: 2020-08-20 17:12:26 */ 

// import * as xxx from 'xxx'; 會將若干export導出的內容組合成一個對象返回； // import xxx from 'xxx';（export default xxx）只會導出這個默認的對象作為一個對象
 import * as user from './user' import * as infoList from './infoList' export default { user, infoList } // 假設調用則在組件里面 模塊下面的對應的接口方法即可完成調用 // this.$http.user.xx() // this.$http.infoList.xx()

/* * @Description: 測試列表接口 infoList.js * @Version: 2.0 * @Autor: lhl * @Date: 2020-08-03 15:58:10 * @LastEditors: lhl * @LastEditTime: 2020-08-20 17:08:36 */ import instance from './request' import store from '../store/index'

// 角色管理列表
export function roleList (data) { return instance({ url: '/systemdata/role/pageList', method: 'post', headers: { 'Content-Type': 'application/json' }, data }) }

/* * @Description: 用戶信息接口 user.js * @Version: 2.0 * @Autor: lhl * @Date: 2020-08-03 15:35:51 * @LastEditors: lhl * @LastEditTime: 2020-08-20 17:11:13 */ import instance from './request' import store from '../store/index'

// responseType: 'blob', 如果返回的格式是流文件需要加上相應類型

// get請求  // export function getLoawList(params) { // return request({ // url: '/system/lowlist', // method: 'get', // params: params // }) // }

// 獲取用戶信息
export function userInfo(data) { return instance({ url: '/user/userInfo/getByLoginUser', method: 'post', headers: { 'Content-Type': 'application/json' }, data }) } // 獲取頁面按鈕權限
export function btnList (data) { return instance({ url: '/system/menu/getCurrUserButton', method: 'post', headers: { 'Content-Type': 'application/json' }, data }) }

  以上代碼本人項目實測！！！真實可靠，請勿隨意轉載~轉載請注明出處~~~謝謝合作！