axios封装，使用拦截器统一使用接口

1. 在src目录下创建一个utils文件夹（文件名可自取）在这个文件夹下创建request.js文件

  import axios from 'axios';
  import { Loading } from 'element-ui'; //使用element-ui的加载组件（看个人喜欢，也可以用别的，或者不用）

2. 创建axios实例

  const service = axios.create({
    baseURL: '/api',//域名url
    timeout: 5000
  });

3. 请求拦截器

这个拦截器会在你发送请求之前运行
在这里可进行判断登录后token

  service.interceptors.request.use(
    config => {
        let token = sessionStorage.getItem('token');
        if(token){ //如果有token，http请求加上header token
        	 config.headers.token = token //请求头加上token
        }
        Loading.service({
            lock: true,
            text: 'Loading',
            spinner: 'el-icon-loading',
            background: 'rgba(0, 0, 0, 0.7)'
        });
        return config;
    },
    error => {
        // console.log(error);
        return Promise.reject(error);
    }
  );

4. 响应拦截器

请求发送响应返回

  service.interceptors.response.use(
    response => {
        Loading.service().close() //关闭拦截器
        return response; //返回请求成功数据
    },
    error => {
    	// 返回请求失败数据
        // console.log(error);
        return Promise.reject(error);
    }
  );

5. 导出实例

  export default service;

6. 在src下创建api文件夹，在此文件夹下创建index.js文件

axios的调用方式
注意：post请求参数放在data里面，get请求参数放在params里。

  import request from '@/utils/request';
  
  export function get(url, data) {
    return request({
      url: url,
      method: 'get',
      params: data
    })
  }
  
  export function post(url, data) {
    return request({
        url: url,
        method: 'post',
        data: data
    })
  }

  export function del(url, data) {
    return request({
        url: url,
        method: 'delete',
        data: data
    })
  }

  export function put(url, data) {
    return request({
        url: url,
        method: 'put',
        data: data
    })
  }
  ...

7. 调用

  import { get } from '@/api/index';
  get(url, data).then( res => {
    console.log(res)
  })