vue新建环境变量以及网络请求工具axios的二次封装详解

//.env.dev文件
NODE_ENV = dev
# base url
VUE_APP_BASE_URL = "https://dev.it98k.cn"
--------------------------------------------------------------
//.env.test文件
NODE_ENV = test
# base url
VUE_APP_BASE_URL = "https://test.it98k.cn"
--------------------------------------------------------------
//.env.uat文件
NODE_ENV = uat
# base url
VUE_APP_BASE_URL = "https://uat.it98k.cn"
--------------------------------------------------------------
//.env.prod文件
NODE_ENV = prod
# base url
VUE_APP_BASE_URL = "https://prod.it98k.cn"
--------------------------------------------------------------

"scripts": {
    "serve": "vue-cli-service serve --mode dev",
    "build:test": "vue-cli-service build --mode test",
    "build:uat": "vue-cli-service build --mode uat",
    "build:prod": "vue-cli-service build --mode prod"
  },

//首先引入axios
import axios from 'axios'
//然后通过create方法来创建一个请求服务
//然后create方法内有一些配置项，比如接口域名`baseURL`、接口请求超时时间`timeout`
//接口url`url`
//接口请求方式`method`等等，需要我们按需传入
// create an axios instance
const service = axios.create({
  baseURL: process.env.VUE_APP_BASE_URL, // 完整的api地址 = 接口域名+ 接口路径
  timeout: 5000 // 请求超时时间 5s
})
//下面会定义两个拦截器，分别是 `请求拦截器`，`响应拦截器`
//`请求拦截器`是前端请求后端接口前处理的一些逻辑，比如开启loading，配置header请求头等等
//`响应拦截器`就是后端响应我们前端，返回回来的数据，比如我们可以在这响应拦截器内拿到status Code
//拿到后端接口返回的code，关闭loading、根据code码处理一些详细的逻辑等等一系列操作
//request interceptor   请求拦截器  
service.interceptors.request.use(
  config => {
    // do something before request is sent。在发送请求之前做一些事情
    config.headers['token'] = "xxxxxx"
    return config
  },
  error => {
    // do something with request error
    console.log(error) // for debug
    return Promise.reject(error)
  }
)
// response interceptor  响应拦截器
service.interceptors.response.use(
  response => {
    const res = response.data
    // if the custom code is not 20000, it is judged as an error.
    if (res.code !== 200) {
      alert(res.message || 'Error')
      return Promise.reject(new Error(res.message || 'Error'))
    } else {
      return res
    }
  },
  error => {
    console.log('err' + error) // for debug
    alert(res.message || 'Error')
    return Promise.reject(error)
  }
)
// 最后暴露我们声明的 service 服务
export default service

import request from '../utils/request';
//登录接口，post方式传参用data
export function login(data) {
  return request({
    url: '/api/login',
    method: 'post',
    data
  })
}
//获取xx列表接口，get方式传参用params
export function getList(params) {
  return request({
    url: '/api/getList',
    method: 'get',
    params
  })
}

//首先第一步要用import导入进来我们的登录接口
import { login } from '../api/index'
//然后直接调用login方法
login({username:'admin',password:"123456"}).then(res=>{
      console.log(res);
})