Vue--手动封装fetch,请求放在store的action

封装fetch

//添加基本请求路径、请求和响应拦截处理、导出是一个函数，该函数是一个封装get、post和其他类型的函数，
// 下次就不用指定要用什么类型，直接就调用该方法
import axios from "axios";
import qs from "qs";
import { API_BASE } from "../config";
import { getLocalStorage } from "@/utils/auth";
import router from "@/router/index";
import { Message } from "element-ui";
import { elementMessage } from "@/utils/common";



// 初始化axios service
const service = axios.create({
  baseURL: API_BASE,
  timeout: 5000
});
// axios.defaults.withCredentials=true;
// 设置请求拦截器
service.interceptors.request.use(
  config => {
    return config;
  },
  err => {
    Promise.reject(err);
  }
);
// 设置响应拦截器
service.interceptors.response.use(
  response => {
    if (response.data.errorCode && response.data.errorCode !== 0) {
      elementMessage(response.data.msg, "error", 5000);
    }
    return response;
  },
  err => {
    // 有错误和错误返回
    if (err && err.response) {
      // 有错误码
      if (err.response.data.code) {
        switch (err.response.data.code) {
          case 30001:
            err.message = "找不到该用户";
            break;
          case 60001:
            err.message = "验证码错误";
            break;
          case 60003:
            err.message = "验证验证码太频繁，已失效";
            break;
          case 20001:
            err.message = "缺少参数";
            break;
          case 20005:
            err.message = "参数错误";
            break;
          case 30006:
            err.message = "密码错误";
            break;
          case 30007:
            err.message = "账号或密码错误";
            break;
          case 20004:
            err.message = "token已失效";
            break;
          case 91001:
            err.message = "没有对应权限";
            break;
          default:
            err.message = err.response.data.message;
        }
      } else {
        //没错误码，根据响应返回状态
        switch (err.response.status) {
          case 400:
            err.message = "错误请求";
            break;
          case 401:
            err.message = "未授权，请重新登录";
            router.replace({ path: "/login" });
            break;
          case 403:
            err.message = "拒绝访问";
            break;
          case 404:
            err.message = "请求错误,未找到该资源";
            break;
          case 405:
            err.message = "请求方法未允许";
            break;
          case 408:
            err.message = "请求超时";
            break;
          case 500:
            err.message = "服务器端出错";
            break;
          case 501:
            err.message = "网络未实现";
            break;
          case 502:
            err.message = "网络错误";
            break;
          case 503:
            err.message = "服务不可用";
            break;
          case 504:
            err.message = "网络超时";
            break;
          case 505:
            err.message = "http版本不支持该请求";
            break;
          default:
            err.message = `连接错误${err.response.status}`;
        }
      }
    } else {
      // 有错误，没有响应
      err.message = "连接到服务器失败";
    }
    // 显示错误信息
    Message.error(err.message);
    return Promise.reject(err.message);
  }
);

// axios get post
// 导出是一个函数，该函数是一个封装get、post和其他类型的函数，请求获取数据
export default async (url = "", data = {}, type = "GET", headers = {}) => {
  type = type.toUpperCase();
  let response;
  let token = getLocalStorage("token");
  // 如果是Get method
  try {
    if (type == "GET") {
      var dataAddToken = Object.assign(data, { token: token });
      response = await service.get(url, { params: dataAddToken });
    } else if (type == "POST") {
      var dataAddToken = Object.assign(data, { token: token });//加token
      response =
        url == "/instructor/login" ||
        url == "/code/send-user-exist" ||
        url == "/code/check" ||
        url == "/instructor/find-password"
          ? await service.post(url, data) //不携带token
          : await service.post(`${url}`, qs.stringify(dataAddToken), {
              headers: headers //额外请求头信息
            });
    } else if (type == "DELETE") {
      response = await service.delete(`${url}?token=${token}`, data);
    } else if (type == "PUT") {
      response = await service.put(`${url}?token=${token}`, data);
    } else if (type == "PATCH") {
      response = await service.patch(`${url}?token=${token}`, data);
    }
  } catch (err) {
    throw new Error(err);
  }

  return response;
};
_______________________________________________________________________
common.js部分：
export function elementMessage(message,type,time) {
	Message({
		message: message,
		type: type,
		duration: time
	})
}

store，挂载main.js

store目录下的index.js

import Vue from "vue";
import "babel-polyfill";
import Vuex from "vuex";
import createPersist from "vuex-localstorage";
import { navMutations } from "./mutations";
import {
  loginActions,
  testAnalysisActions,
  userActions,
  setActions
} from "./actions";
if (process.env.NODE_ENV === "development") {
  Vue.use(Vuex);
}
// console.log(Vue.$route)
// 将action,mutations中的方法挂在store,下次再main.js导入一次，可以全组件使用
export default new Vuex.Store({
  strict: false,
  state: {
    showLoader: false
  },
  plugins: [
    createPersist({
      namespace: "namespace-for-state",
      initialState: {},
      // ONE_WEEK
      expires: 7 * 24 * 60 * 60 * 1e3
    })
  ],
  //用于更改store.state.showLoader等状态的关闭
  mutations: Object.assign({}, navMutations),
  // 页面请求获取数据的方法
  actions: Object.assign(
    {},
    loginActions,
    testAnalysisActions,
    userActions,
    setActions
  )
});

store目录下的mutations.js

export const navMutations = {
  // 默认传state中store，和另一个参数
  [CHANGE_SIDEBAR]: (state, payload) => {
    state.showSidebar = false;
  }
};

store目录下的action.js ，preload是传入数据

// 不同页面 需要的相关的数据
import axios from "axios";
import { API_BASE } from "../config";
import {
  getLocalStorage,
  setLocalStorage,
  removeLocalStorage
} from "@/utils/auth";
import fetch from "@/utils/fetch";
import { urlParams } from "@/utils/common";

// 登录有关
export const loginActions = {
  // 登录接口
  loginIn({ commit }, preload) {
    return fetch("/instructor/login", preload, "POST").then(res => {
      res.data &&
        res.data.data.token &&
        setLocalStorage("token", res.data.data.token);
      res.data &&
        res.data.data.token &&
        setLocalStorage("cover", res.data.data.cover);
      res.data &&
        res.data.data.name &&
        setLocalStorage("name", res.data.data.name);
      return res.data.code;
    });
  },
  // 退出登录接口
  loginOut({ commit }) {
    return fetch(`/instructor/logout`, {}).then(res => {
      removeLocalStorage("token");
      removeLocalStorage("cover");
      removeLocalStorage("name");
    });
  },
  // 获取验证码接口
  getVerificationCode({ commit }, preload) {
    return fetch(`/code/send-user-exist`, preload, "POST").then(res => {
      return res.data.code;
    });
  },
  // 验证验证码接口
  verificationCode({ commit }, preload) {
    return fetch("/code/check", preload, "POST").then(res => {
      return res.data.code;
    });
  },
  // 修改密码接口
  modifyPass({ commit }, preload) {
    return fetch(`/instructor/change-password`, preload, "POST").then(res => {
      return res.data.code;
    });
  },
  // 找回密码接口
  findPass({ commit }, preload) {
    return fetch("/instructor/find-password", preload, "POST").then(res => {
      return res.data.code;
    });
  }
};
export const testAnalysisActions = {}
export const userActions = {
  // 学生作业情况
  getDataStudentHomework({ commit }, preload) {
    return fetch(`/data/student-homework`, preload, "POST");
  },
  getDataScoreOverview({ commit }) {
    // return {
    //     data: {
    //         code: 0,
    //         msg: '',
    //         data: {
    //             student_count: 10,
    //             avg_count: 10,
    //             score_rate: 10,
    //         }
    //     }
    // }
    return fetch(`/data/score-over-view`, {}, "POST");
  }
};
// 区域题库
export const setActions = {}

在不同页面中使用，awaitWrap

//请求路径及get/post方式已在action写好，负责想要对应数据，写好方法名和参数
  const [res, err] = await awaitWrap(that.$store.dispatch('getDataStudentHomework', { //{}对应上面preload
          page_size: page_size,
          page_index: page_index,
          name: name
        }))