vue axios封装和测试环境配置

步骤一：手动创建 文件 .env.development 和.env.production和.env.test几个文件

.env.development如下：（开发环境）

NODE_ENV = 'development'
VUE_APP_MODE = 'development'
VUE_APP_API_URL = 'https://testshool.zzgoodqc.cn/'

.env.production如下：（正式线上环境，或者叫生产环境）

NODE_ENV = 'production'
VUE_APP_MODE = 'production'
VUE_APP_API_URL = 'https://goods.zzgoodqc.cn/'

.env.test（测试环境）

NODE_ENV = 'test'
VUE_APP_MODE = 'test'
VUE_APP_API_URL = 'http://49.94.4.21/'
outputDir = test

步骤二:在src文件夹下创建文件夹api再创建文件api.js和https.js

app.js:

import axios from "axios";

axios.defaults.timeout = 30000;
//获取当前环境配置项中的地址，会自动追加到接口上
axios.defaults.baseURL = process.env.VUE_APP_API_URL;

// //获取配置项信息，可以做你的逻辑处理
if (process.env.VUE_APP_MODE === "development") {
  //开发环境下的执行操作
  console.log("开发");
} else if (process.env.VUE_APP_MODE === "test") {
  //测试环境下的执行操作
  console.log("测试");
} else {
  //生产环境下的执行操作
  console.log("正式");
}

// 添加响应拦截器
axios.interceptors.response.use(
  function (response) {
    //可以写if判断，提前拦截错误信息
    return response;
  },
  function (err) {
    return Promise.reject(err);
  }
);

export function apiGet(url, params) {
  return new Promise((resolve, reject) => {
    axios
      .get(url, {
        params: params,
        headers: { token: sessionStorage.getItem("token") },
      })
      .then((res) => {
        resolve(res.data);
      })
      .catch((err) => {
        reject(err.data);
      });
  });
}

export function apiPost(url, params) {
  return new Promise((resolve, reject) => {
    axios({
      method: "post",
      url: url,
      data: params,
    })
      .then((res) => {
        resolve(res.data);
      })
      .catch((err) => {
        reject(err.data);
      });
  });
}

https.js:

// 获取服务列表
export function getGoodsList(page, pagelimit) {
  return new Promise((resolve) => {
    apiGet("/index.php/index/Yimi/getGoodsList", { page, pagelimit }).then(
      (res) => {
        resolve(res);
      }
    );
  });
}

// 添加
export function addGoods(data) {
  return new Promise((resolve) => {
    apiPost("/index.php/index/Yimi/addGoods", data).then((res) => {
      resolve(res);
    });
  });
}

步骤三：使用

import { getGoodsList } from '../api/https';

export default {
    data() {
        return {
        };
    },
    methods: {
        getGoodsList() {
            getGoodsList().then(res => {
                console.log(res);
            })
        },
    },
    mounted() {
        this.getGoodsList();
    }
}