axios接口请求封装以及跨域代理配置（简单基础配置，后续可按需封装）

axios接口请求封装以及跨域代理配置（简单基础配置，后续可按需封装）

原生axios接口请求

npm install axios--S

新建axios封装js文件request.js并引入axios

import axios from 'axios'

request.js：

import axios from 'axios'

//创建一个axios对象
const instance = axios.create({
  baseURL:'/api',//会在发送请求时候拼接在url参数前面
  timeout:5000,//请求5s超时
  withCredentials: true // 是否允许带cookie这些
})

//全局请求拦截
//表示所有的网络请求都会先走这个方法
//我们可以在它里面添加一些自定义的内容
instance.interceptors.request.use(
  function (config) {
    console.group('全局请求拦截')
    console.log(config)
    console.groupEnd()
    config.headers.token = '12345'//例如可以在请求头里面设置token值，token变量名前后端约定
    return config;
  },
  function (err) {
    return Promise.reject(err);
  },

)

//全局响应拦截
//表示所有网络请求返回数据之后都会先执行此方法
//此处可以根据服务器返回的状态码做相应的处理
//如根据请求状态码404/401/500等做相应的处理，页面跳转等
instance.interceptors.response.use(function (response) {
  console.log('全局响应拦截');
  console.log(response)
  console.groupEnd()
  return response
}),function (err) {
  return Promise.reject(err)

}

/*export function get (url,params) {
  return axios.get(url,{
    params
  });
}*/

export function get (url,params) {
  return instance.get(url,{
    params
  });
}

export function post (url,data) {
  return instance.post(url,data);
}

export function del (url) {
  return instance.delete(url);
}

export function put(url,data) {
  return instance.put(url,data);
}

跨域配置：vue-cli2.0版本在config文件下的index.js进行配置、vue-cli3.0版本在vue.config.js下进行配置
vue-cli2.0
在module.exports下的dev下的proxyTable添加下列配置即可

proxyTable: {//用代理的方式实现跨域访问
      '/': {
        target: 'http://152.136.185.210:7878/api/m5',    //设置你调用的接口域名和端口号
        changeOrigin: true,    //true表示允许跨域，有人说false也可以，我没试过
        pathRewrite: {
          '/api': ''   //请求接口时直接用/api = http://123.456.789.123:8081/abc
        }
      }
    },

3.0版本：在devServer下的module.exports下的proxy进行配置

devServer: {
    port: 8089, // 端口号
    open: false, // 配置自动启动浏览器
    proxy: {
      '/': {
        target: 'http://152.136.185.210:7878/api/m5', 

        changeOrigin: true,
        pathRewrite: {
          '^/parkingServer': '/'
        }
      }, 
      }
    }
  },

组件中接口请求使用
组件中引入request.js以,axios以及请求方法（按需引入）

import axios from 'axios'
  import '../../api/request'
  import {get} from '../../api/request'
  

组件完整代码：

<template>
  <div>
    <!--接口请求封装测试-->
    <button @click="getAxiosMethods">未封装接口请求get</button>
    <button @click="getMyAxiosMethods">封装接口请求get</button>
    <div>

    </div>
  </div>
</template>
<script>
  import axios from 'axios'
  import '../../api/request'
  import {get} from '../../api/request'
  export default {
    data(){
      return{

      }
    },
    methods:{
      //接口请求测试
      //未封装
      getAxiosMethods(){
        axios.get('http://152.136.185.210:7878/api/m5/home/multidata',{
          params:{
          },headers:{}
        }).then(res=>{
          console.log(res,'未封装')
        })
      },
      //已封装
      getMyAxiosMethods(){
        //未设置baseUrl时候
        /*get('http://152.136.185.210:7878/api/m5/home/multidata',{}).then(res=>{
          console.log(res,'已封装')
        })*/
        //设置baseUrl时候
        get('/home/multidata',{}).then(res=>{
          console.log(res,'已封装')
        })
      },
    }
  }
</script>
<style>

</style>

请求效果：

具体可按照自己的需求对接口内容进行封装。