引入下axios，然后对axios做下基本的封装。然后就是mock数据的方式说一下，以及在项目中使用的mock方式。
项目地址：https://github.com/Ewall1106/mall

安装

$ npm install axios --save

基本封装

• 我们简单的在src/utils/request.js文件中简单的进行了一下axios 封装。

import axios from "axios";
import { Toast, Dialog } from "vant";

// 创建一个axios实例
const service = axios.create({
  baseURL: process.env.VUE_APP_BASE_API,
  // withCredentials: true,
  timeout: 5000,
});

// 请求拦截器
service.interceptors.request.use(
  (config) => {
    // 这里做些发送请求前的事情
    return config;
  },
  (error) => {
    console.log(error);
    return Promise.reject(error);
  }
);

// 响应拦截器
service.interceptors.response.use(
  (response) => {
    const res = response.data;

    // 与后端约定的错误码
    if (res.code !== 200) {
      Toast.fail(res.message);
      return Promise.reject(new Error(res.message || "Error"));
    } else {
      return res;
    }
  },
  (error) => {
    console.log("err" + error);
    Toast.fail(error.message);
    return Promise.reject(error);
  }
);

export default service;

环境区分

使用 vue 中的模式

• 对于环境的不同判断，比如开发环境、测试环境、灰度环境、线上环境等等，在@vue/cli3.x以上的脚手架中，通过新建一个.env.[xxx]的文件来维护-->环境变量和模式

// .env.development
# base api
VUE_APP_BASE_API = '/dev-api'

// .env.production
# base api
VUE_APP_BASE_API = '/prod-api'

• 然后我们就可以使用 process.env.VUE_APP_BASE_API 来取到不同环境下的所定义的值。

使用 cross-env 包

• 就为了区分一下环境，却需要在主目录下根据环境新建多个.env.[xxx]的文件，为了使主目录看起来更加简洁一点，所以项目中使用了 cross-env 这个包来区分环境。

• 安装它：

$ npm install cross-env --save-dev

• 在 package.json 中配置 scripts 脚本命令的时候指定一下环境。

"scripts": {
  "build": "cross-env NODE_ENV=production vue-cli-service build",
  "dev": "cross-env NODE_ENV=development vue-cli-service serve",
}

• 然后我们就可以使用 process.env.NODE_ENV 来取到不同环境下的所定义的值。

使用

• 以我们首页中获取 banner 数据为例，首先我们新建了一个src/api文件夹用于维护接口，在该文件夹下定义了一个getBanner请求方法：

import request from "@/utils/request";

export function getBanner() {
  return request({
    url: "/home/banner",
    method: "get",
  });
}

• 然后我们在首页home.vue中引入并使用它：

import { getBanner } from '@/api/home'

getBanner() {
  getBanner().then(res => {
    console.log('get banner data', res)
  })
}