1.配置axios，qs

npm install axios --save

npm install qs

1.1main.js引入

import 'amfe-flexible'

import store from './store/store.js'

2.在src文件夹下面新建request文件夹，在request文件夹里面新建api.js，http.js，base.js

2.1http.js

// 在http.js中引入axios

import axios from 'axios'; // 引入axios

import { Message } from "element-ui";

import QS from 'qs'; // 引入qs模块，用来序列化post类型的数据，后面会提到

import store from '../store/store'

import base from './base'

import { bus } from './api'

// 通过axios.defaults.timeout设置默认的请求超时时间。例如超过了10s，就会告知用户当前请求超时，请刷新等。

// post请求的时候，我们需要加上一个请求头，所以可以在这里进行一个默认的设置，即设置post的请求头为application/x-www-form-urlencoded;charset=UTF-8

const instance = axios.create({

  baseURL: base.sq,

  timeout: 1000,

  headers: {'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8'}

});

// 请求拦截器

// 每次发送请求之前判断vuex中是否存在token

// 如果存在，则统一在http请求的header都加上token，这样后台根据token判断你的登录情况

// 即使本地存在token，也有可能token是过期的，所以在响应拦截器中要对返回状态进行判断

instance .interceptors.request.use(

  config => {

    const token = sessionStorage.getItem("token");

    token && (config.headers.Authorization = token);

    // const token = store.state.token;

    // console.log(store.state.token)

    // token && (config.headers.Authorization = token);

    store.state.loading = true;

    return config;

  },

  error => {

    console.log('请求超时，请稍后重试！')

    return Promise.error(error);

  }

);

// 添加一个响应拦截器

instance .interceptors.response.use(

  // 请求成功

  res => {

    store.state.loading = false;

    // 返回的状态码

    // console.log(res.data , res.data.status)

    if (res.data && res.data.status) {

      if (parseInt(res.data.status) === 401) {

        //未登录

        Message({

          showClose: true,

          message: "请登录...",

          type: "error",

          duration: 2000

        });

        setTimeout(function(){

          bus.$emit('goto', '/login')

        },2000);

      }else if (parseInt(res.data.status) === 402){

        Message({

          showClose: true,

          message: res.data.err,

          type: "error",

          duration: 2000

        });

      }

    }

    return res;

    // res.status === 200 ? Promise.resolve(res) : Promise.reject(res),

  },

  // 请求失败

  error => {

    const {

      response

    } = error;

    if (response) {

      // 请求已发出，但是不在2xx的范围

      if (error.response.status == '400' || error.response.status == '404') {

        Message({

          showClose: true,

          message: "请求方式出错",

          type: "error",

          duration: 2000

        });

      } else if (error.response.status == '403') {

        Message({

          showClose: true,

          message: '您没有此权限',

          type: "error",

          duration: 2000

        });

      } else if (error.response.status == '402') {

        Message({

          showClose: true,

          message: '登录失败，请检查账号密码！',

          type: "error",

          duration: 2000

        });

      } 

      store.state.loading = false

      // Do something with response error

      return Promise.reject(error);

    } else {

      // 处理断网的情况

      // eg:请求超时或断网时，更新state的network状态

      // network状态在app.vue中控制着一个全局的断网提示组件的显示隐藏

      // 关于断网组件中的刷新重新获取数据，会在断网组件中说明

      Message({

        showClose: true,

        message: '断网了,请检查网络链接',

        type: "error",

        duration: 2000

      });

    }

  }

);

/**

* 封装get方法

* @param url

* @param params

* @returns {Promise}

*/

export function get(url, params) {

  return new Promise((resolve, reject) => {

    instance.axios.get(`${url}`, {

        params: params

      })

      .then(res => {

        resolve(res);

      })

      .catch(err => {

        reject(err)

      })

  })

}

/**

* 封装post请求

* @param url

* @param params

* @returns {Promise}

*/

export function post(url, params) {

  return new Promise((resolve, reject) => {

    instance.axios.post(`${url}`, QS.stringify(params))

      .then(res => {

        resolve(res);

      }, err => {

        reject(err)

      })

  })

}

/**

* 封装patch请求

* @param url

* @param params

* @returns {Promise}

*/

export function patch(url, params) {

  return new Promise((resolve, reject) => {

    instance.axios.patch(`${url}`, QS.stringify(params))

      .then(res => {

        resolve(res);

      }, err => {

        reject(err)

      })

  })

}

/**

* 封装put请求

* @param url

* @param params

* @returns {Promise}

*/

export function put(url, params) {

  return new Promise((resolve, reject) => {

    instance.axios.put(`${url}`, QS.stringify(params))

      .then(res => {

        resolve(res);

      }, err => {

        reject(err)

      })

  })

}

2.2api.js

import Vue from 'vue'

import axios from 'axios'

import {get,post,fetch,patch,put} from './http'

//定义全局变量

Vue.prototype.$get=get;

Vue.prototype.$post=post;

Vue.prototype.$patch=patch;

Vue.prototype.$put=put;

/**

* api接口统一管理

*/

// 获取token跳转页面

export const bus = new Vue();

//bus是判断无token情况下请求数据，会跳转登录页面方法在http.js下面的$emit，$on设置在index.vue或者app.vue里面都可以

//$on

created(){

    bus.$on('goto', (url) => {

      if (url === "/login") {

        sessionStorage.removeItem('token');

      }

      this.$router.push(url);

    })

  },

// get

export const tTable = data => get('/table', data);

// post

export const Terrar = data => post('/errar', data);

2.3base.js

/**

* 接口域名的管理

*/

const base = {

  sq: 'https://www.xxxxx.com/api ',

}

export default base