axios的请求封装

// 首先要在node的环境下 安装axios并导入 可以用 npm  install i 进行全局下载安装
import axios from 'axios'  

先看一下结构目录

在requister.js中

import axios from 'axios'  

const service = axios.create({   // 添加自定义配置新的axios
    baseurl:"" ,  // 请求接口路径
    timeout: 20000 // 设置接口超时20s
})

// axios.interceptors.request.use(config =>{  // 接口请求拦截器  在请求接口前进行配置的内容

// })

service.interceptors.request.use(config =>{
    config.headers['UserId'] = localStorage.getItem('USERID')  // 在请求头中添加参数 
    if (config.headers["Content-Type"] === "application/x-www-form-urlencoded") {
        let form = new FormData();  // 构造函数 解决传递头部参数格式不正确
        for (let key in config.data) {
          form.append(key, config.data[key]);
        }
        config.data = form
      }
    if(config.method === 'get'){  // get 请求

    }else if(config.method === 'post'){// post 请求
        //  根据真实数据进行调整
        if (config.data instanceof FormData) {    //instanceof  判断 config.data  是否是构造函数
           
        } else {
            // 第二次请求 数据会序列号 所以需要判断 解除二次序列化
            if(typeof config.data === 'string') {
                config.data = JSON.parse(config.data)
            }
        }
    } 
    return config //  请求头部抛出
},
    error =>{
        return Promise.reject(error)                 //返回一个带有拒绝原因的 Promise 对象。
    }
)  


service.interceptors.response.use(response => {   //拦截器相应之后 在响应之后对数据进行相对应的处理
    return response
},
error => {
    return Promise.reject(error)
}
)

export default service  // 将这个接口拦截给抛出 让其他文件能够导入

在im.js中

.env文件用于区分是正式环境还是测试环境

import request from '../store/requister'

let d = process.env.NODE_ENV !== "development" ? "/newApi" : "/api"  // 用于区分环境 正式环境还是测试环境 


export function fetchGetUserInfo(data) {  // 接口中 后面拼接参数方式
    return request({
        url:`${d}/IM/getUserInfo/${data}`,
        method:'get',
        params:{}
    })
}


export function GetWebUserGroup(data) { // 直接以键值对的方式进行传参
    return request({
        url:`${d}/RYGroup/GetWebUserGroup`,
        method:'get',
        params:data
    })
}
export function ManagerCreateUserGroup(data) { // post方式 
    return request({
        url:`${d}/RYGroup/ManagerCreateUserGroup`,
        method:'post',
        headers: {
            "Content-Type": "application/x-www-form-urlencoded", //（我在请求头中添加的判断，根据业务逻辑来进行对应的更改）
        },
        data,
    })
}

两个.env文件

下面是第一个.env文件 .env.development。

ENV = 'development'
VUE_APP_BASE_INDEX_URL = 'https://xxxxxxxxx/#/'
#//VUE_APP_BASE_API = 'http://192.000.000.000'  后台主机本地地址
VUE_APP_BASE_IM_KEY = 'xxxxxxxxr'  // 全局用到第三方插件的key值  （根据具体的业务插件进行填写 没有课不写）

第二个.env文件 .env.test。

ENV = 'test'
VUE_APP_BASE_INDEX_URL = 'https://xxxxxxxxx/#/'
#//VUE_APP_BASE_API = 'http://192.000.000.000'
VUE_APP_BASE_IM_KEY = 'xxxxxxxxr'

两者的基本区别就是 ENV的值不一样 其他基本相同 为了辨别是那个环境

基本准备完成 接着就是调用的问题了
在你想调用的页面引入im.js文件

import {fetchGetUserInfo,GetWebUserGroup} from '../store/im'

方法调用

   btnclick(){
   let userId  = '' // 传递的参数
    fetchGetUserInfo(userId).then(res=>{
      console.log(res)
    })
   },
   btnclick1(){
   let arr = [] //参数数据
   let userId = 20010818
    GetWebUserGroup({userId:userId ,groupIds:arr}).then(res=>{
      console.log(res)
    })
   }

至此基本上已完成 但是还有个问题 就是如果你接口地址不在本机服务器中 就需要 webpack进行配置一番

const webpack = require('webpack')

module.exports = {
  publicPath:'./',//打包后的位置(如果不设置这个静态资源会报404)
  outputDir:'disTst',
  assetsDir:'static',//静态资源目录名称
  productionSourceMap:false,  //去掉打包的时候生成的map文件
  lintOnSave:false,  //设置是否在开发环境下每次保存代码时都启用 eslint验证
  filenameHashing: false,  //执行 npm run build 之后的 dist 目录的静态资源的文件名多会追加上 hash 值 当 html 不是自动生成或者其他情况时候，就不能加 hash 了，可以配置 false
  devServer: {
    host: '127.0.0.1',   // 本机名称
    port: 8080,   //  端口
    https: true,  // 前缀是http 还是https
    hotOnly: false,  // 是否开启热更新
    proxy: {
      '/api': {
        target: 'https://xxxxxxx.com',  // 后天接口域名
        secure: false,   // 如果是https接口，需要配置这个参数
        ws: true, //如果要代理 websockets，配置这个参数
        logLevel:'debug',   // 在终端查看代理的真实请求地址 
        changeOrigin: true,  // 是否跨域
        pathRewrite: {   //  重定向域名
          '^/api': '/api'   
        }
      },
      '/foo': {
        target: '<other_url>' // 要使用 Proxy 包装的目标对象（可以是任何类型的对象，包括原生数组，函数，甚至另一个代理）。
      },
    },
    headers: {
      'Access-Control-Allow-Origin': '*',
    },
  },
}

配置完成 重启项目运行 即可！