【VUE】在项目中如何封装和使用axios

首先用vuecli4创建的项目结构如下

1. 创建文件src/utils/request.js封装axios

import axios from "axios";
import { Message, MessageBox, Loading } from "element-ui";
import store from "../store";
import { getToken } from "@/utils/auth";

// 创建axios实例 service 
const service = axios.create({
  baseURL: "", // api 的 base_url，由于我请求后台多个微服务，这里给空，后面具体再拼接
  withCredentials: true, // 允许后台的cookie传递到前端
  timeout: 100000 // 请求超时时间
});

// 传递token
service.defaults.headers.common["Authorization"] = getToken();

// 请求计数器
let requestNum = 0;
let loading = null;

// request拦截器
service.interceptors.request.use(
  config => {
    if (store.getters.token) {
      // 让每个请求携带自定义token 请根据实际情况自行修改
      config.headers.Authorization = getToken();
    }
    // 请求加1
    requestNum++;
    if (loading == null) {
      loading = Loading.service({ fullscreen: true, text: "正在努力加载中~" });
    } else if (requestNum > 0) {
      loading = Loading.service({ fullscreen: true, text: "正在努力加载中~" });
    }
    return config;
  },
  error => {
    // 处理请求失败
    console.log(error);
    Promise.reject(error);
    // 出错了直接关闭loading
    requestNum = 0;
    if (loading) {
      loading.close();
    }
  }
);

// response拦截器
service.interceptors.response.use(
  response => {
    // code为非success和error是抛错 可结合自己业务进行修改
    const res = response.data;
    // 请求数减1
    requestNum--;
    if (loading == null || requestNum <= 0) {
      loading.close();
    }
    if (res.code === "success" || res.code === "error" || res.success) {
      // 请求完毕
      return response.data;
    } else {
      // 出错了直接关闭loading
      requestNum = 0;
      loading.close();
      if (res.code === 401) {
        MessageBox.confirm(
          "token已过期，可以取消继续留在该页面，或者重新登录",
          "确定登出",
          {
            confirmButtonText: "重新登录",
            cancelButtonText: "取消",
            type: "warning"
          }
        ).then(() => {
          store.dispatch("FedLogOut").then(() => {
            location.reload(); // 为了重新实例化vue-router对象 避免bug
          });
        });
        return Promise.reject("error");
      } else if (res.code === 402) {
        // 接口没有权限访问时
        Message({
          message: res.data,
          type: "error",
          duration: 5 * 1000
        });
        return Promise.reject("error");
      } else {
        console.log("错误信息", res);
        Message({
          message: res.message,
          type: "error",
          duration: 5 * 1000
        });
        return Promise.reject(res.message);
      }
    }
  },
  error => {
    console.log("错误码", error);
    // 出错了直接关闭loading
    requestNum = 0;
    loading.close();
    Message({
      message: error,
      type: "error",
      duration: 5 * 1000
    });
    return Promise.reject(error.message);
  }
);

export default service;

创建文件src/api/xxx.js分类封装所有请求

import request from "@/utils/request";

export function login(param) {
  return request({
    url: process.env.VUE_APP_ADMIN_API + "/auth/login",
    method: "post",
    data: param
  });
}

export function getInfo(token) {
  return request({
    url: process.env.VUE_APP_ADMIN_API + "/auth/info",
    method: "get",
    params: { token }
  });
}

3. 调用api发送请求

import { login, logout, getInfo, getMenu } from "@/api/login";

var params = new URLSearchParams();
params.append("username", username);
params.append("password", password);
// 发送登录请求
login(params)
  .then(response => {
    const data = response.data;
    // 向cookie中设置token
    setToken(data.token);
    // 向store中设置cookie
    commit("SET_TOKEN", data.token);
    resolve(response);
  })
  .catch(error => {
    reject(error);
  });

这里记录一个问题回头用空在学习
vuex+axios+element-ui实现页面请求loading