axios的二次封装

1、在src下新建config/index.js

根据当前是开发环境还是生产环境来指定请求的基础路径

export default{
    baseUrl:{
        dev:'/api/',  //开发环境
        pro:''        //生产环境
    }
}

2、在src下新建api/axios.js

axios相关配置

import axios from "axios"
import config from '../config'

// 根据当前是开发模式还是生产模式来确定请求的基础路径
const baseUrl = process.env.NODE_ENV === 'development' ? config.baseUrl.dev : config.baseUrl.pro

// es6 class类 声明一个HttpRequest类
class HttpRequest{
    // 构造函数初始化
    constructor(baseUrl){
        this.baseUrl = baseUrl
    }
    // 定义axios相关配置
    getInsideConfig(){
        const config = {
            baseUrl:this.baseUrl,
            // `headers` 是即将被发送的自定义请求头
            header:{}
        }
        return config
    }

    interceptors(instance){
        // Add a request interceptor（请求拦截）
        instance.interceptors.request.use(function (config) {
            // Do something before request is sent（在项目中发请求之前可以做一些事情，config：配置对象）
            return config;
        }, function (error) {
            // Do something with request error
            return Promise.reject(error);
        });

        // Add a response interceptor（响应拦截）
        instance.interceptors.response.use(function (response) {
            // Do something with response data（响应成功）
            return response;
        }, function (error) {
            // Do something with response error（响应失败）
            return Promise.reject(error);
        });
    }
    request(options){
        const instance = axios.create()
        options = {...this.getInsideConfig(),...options}
        this.interceptors(instance)
        return instance(options)
    }
}

export default new HttpRequest(baseUrl)

3、接口请求文件 src/api/data.js

import axios from './axios'

export const getMenu = (param) => {
    return axios.request({
        url:'/permission/getMenu',
        method:'post',
        data:param
    })
}

export const getData = () => {
    return axios.request({
        url:'/home/getData',
    })
}

export const getUser = (params) => {
    return axios.request({
        url:'/user/getUser',
        method:'get',
        params
    })
}

4、组件中使用

import {getData} from '../../api/data'

mounted(){
        getData().then(res => {
            ......
        })
}

5、补充：如果需要使用mock模拟数据的话

（1）在 api 下新建 mockSeverData/permission.js

// mock数据模拟
import Mock from 'mockjs'

// 图表数据
let List = []
export default {
  getStatisticalData: () => {
    //Mock.Random.float 产生随机数100到8000之间 保留小数 最小0位 最大0位
    for (let i = 0; i < 7; i++) {
      List.push(
        Mock.mock({
          苹果: Mock.Random.float(100, 8000, 0, 0),
          vivo: Mock.Random.float(100, 8000, 0, 0),
          oppo: Mock.Random.float(100, 8000, 0, 0),
          魅族: Mock.Random.float(100, 8000, 0, 0),
          三星: Mock.Random.float(100, 8000, 0, 0),
          小米: Mock.Random.float(100, 8000, 0, 0)
        })
      )
    }
    return {
      code: 20000,
      data: {
        // 饼图
        videoData: [
          {
            name: '小米',
            value: 2999
          },
          ......
        ],
        // 柱状图
        userData: [
          {
            date: '周一',
            new: 5,
            active: 200
          },
          ......
        ],
        // 折线图
        orderData: {
          date: ['20191001', '20191002', '20191003', '20191004', '20191005', '20191006', '20191007'],
          data: List
        },
        tableData: [
          {
            name: 'oppo',
            todayBuy: 500,
            monthBuy: 3500,
            totalBuy: 22000
          },
          ......
        ]
      }
    }
  }
}

（2）在api下新建 mock.js

用于拦截请求

import Mock from 'mockjs'
import homeApi from './mockServerData/home'
import userApi from './mockServerData/user'
import permissionApi from './mockServerData/permission'

Mock.mock('/home/getData',homeApi.getStatisticalData)

// Mock.mock(/user\/add/,'post',userApi.createUser)
Mock.mock('/user/add','post',userApi.createUser)
Mock.mock(/user\/edit/,'post',userApi.updateUser)

Mock.mock(/user\/getUser/,'get',userApi.getUserList)

Mock.mock(/user\/del/,'post',userApi.deleteUser)

Mock.mock(/permission\/getMenu/,'post',permissionApi.getMenu)