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
  })
}

  以上代码本人项目实测！！！真实可靠，请勿随意转载~转载请注明出处~~~谢谢合作！