vue中文件配置以及axios请求的封装

1. 首先，很多的时候项目的文件的布局以及代码的管理真的很重要。（亲身体验，努力改进中）
   
   2.其次是axios封装，直接上代码吧。（在其request JS文件里面）

import Vue from "vue";
import axios from "axios";
import qs from "qs";  //序列化字符串
import { Toast } from "vant";

Vue.use(Toast);
Vue.prototype.$axios = axios;
Vue.prototype.$qs = qs;

const url = "默认的域名";

// 导出封装好的axios
export function request(config) {
  // 1、创建axios实例
  const instance = axios.create({
    baseURL: url
  });
  // 2、axios的请求拦截器
  instance.interceptors.request.use(
    req => {
      Toast.loading({
        // loading的时候禁止点击
        forbidClick: true,
        message: "加载中..."
      });
      return req;
    },
    err => {
      return Promise.reject(err);
    }
  );

  // 3、axios的响应拦截器
  instance.interceptors.response.use(
    res => {
      // 保证最少500毫秒的加载时间
      setTimeout(() => {
        Toast.clear();
      }, 500);
      return res.data;
    },
    err => {
      return Promise.reject(err);
    }
  );

  return instance(config);
}

3.再其在每个路由中请求数据的页面中再其模块化开发时引入封装的文件即可。

import { request } from "./request";
// 在其请求页面直接引入即可使用导出的请求数据的地方。 如果需要传参自己写成动态的就行。
export function getCategory(dataPost) {
  return request({
    url: "/category"，
    method:'POST'，
    data:dataPost，
    headers:{}， // 看后台带不带
  });
}

export function getSubcategory(maitKey) {
  return request({
    url: "/subcategory",
    params: {
      maitKey
    }
  });
}

export function getCategoryDetail(miniWallkey, type) {
  return request({
    url: "/subcategory/detail",
    params: {
      miniWallkey,
      type
    }
  });
}

4. 最后引入在其页面引入

import {getCategory} from "@/network/category";
      getSubcategory(maitKey).then(res => {
        // console.log(res);  请求数据成功里面进行判断
      });