axios的封装与请求

引入下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)
  })
}

推荐阅读更多精彩内容