Vue添加请求拦截器，配置后台接口方式

一、安装axios、qs。

npm i axios --save-dev
npm i qs --save-dev

二、配置axios

在src下新建config文件夹。并新建js文件。
MT.js

// 引入axios、qs
const axios = require('axios')
const qs = require('qs')
// 异步请求设置，允许跨域
axios.defaults.withCredentials = true
// 配置默认的host（如果有其他地方需要用到host，可以新建一个js文件直接 export { baseUrl }）
let baseUrl = 'https://www.baidu.com'
const service = axios.create({})
// 添加请求拦截器
service.interceptors.request.use(function (config) {
　　// 在发送请求之前做些什么
　　return config
}, function (error) {
　　// 对请求错误做些什么
       Promise.reject(error)
});

// 添加响应拦截器
service.interceptors.response.use(function (response) {
　　// 对响应数据做点什么
　　return response
}, function (error) {
　　// 对响应错误做点什么
　　return Promise.reject(error)
});
// 配置接口请求方式
export const LYD = {
  POST(url, params, type) {
    if (type === 'json') {
      return service.post(baseUrl + url, params)
    } else {
      return service.post(baseUrl + url, qs.stringify(params), {
        headers: {
          'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8',
        }
      })
    }
  },
  GET(url, params) {
    if (params) {
      return service.get(baseUrl + url + '/?' + qs.stringify(params), {
        headers: {
          'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8'
        }
      })
    } else {
      return service.get(baseUrl + url + '/', {
        headers: {
          'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8'
        }
      })
    }
  }
}

配置完成后，在src下新建service文件夹，新建index.js文件

import { LYD } from '../config/LYD'

// 调用接口---例如：
export const jiekou1 = params => LYD.POST("/def/post/jiekou1", params)
export const jiekou2 = params => LYD.GET("/def/get/jiekou2", params)

接下来就是如何使用了。
在页面引入需要用到的接口方法名。例如上面是jiekou1 、jiekou2

import { jiekou1, jiekou2 } from '@/service'
// 在mounted里直接调用
mounted () {
    // 调用接口
    jiekou1({
      id: 1
    }).then(res => {
      console.log(res)
    })
    jiekou2 ({
      type: 1
    }).then(res => {
      console.log(res)
    })
  }

这样一个接口的基本配置就完成了。demo地址：https://github.com/leiyunduo/Vue-Element-UI