vue中axios请求的封装管理

vue中axios请求的封装管理

对于刚接触前端工作的小伙伴，学会封装重复的东东是很重要，这样便于后期的维护，也节省的开发书写时间，总之好处多多
一、首先自己在项目中创建一个文件夹service，在文件包里创建个js文件，命名啥的，根据个人习惯吧！！(一般我是创建一个axios.js)
二、axios.js中的代码（注：项目中要确保已经有了axios，或者jsonp的模块包了）
首先axios上代码

import axios from "axios";
import VueRouter from '@/router'
import { Message } from 'element-ui'
// 默认请求头
axios.defaults.headers["Content-Type"] = "application/json;charset=utf-8";
const service = axios.create();
// 默认域名
service.defaults.baseURL = process.env.VUE_APP_API;
// 超时时间
axios.defaults.timeout = 10000;
function errFunction(msg){
  Message({
    duration:1000,
    message: msg,
    type: 'error'
  })
}
// 控制报错只提示一次
let status = -1;
// request拦截器
service.interceptors.request.use(
  (config) => {
    status = -1;
    if (window.localStorage.getItem('token')) {
      config.headers["Authorization"] = window.localStorage.getItem('token');
    }
    return config;
  },
  (error) => {
    Message.error({
      duration:1000,
      message: "请求超时！",
      type: 'error'
    });
    return Promise.reject(error);
  }
);

// 响应拦截器
service.interceptors.response.use(
  (res) => {
    if(res.data.code == 1001){
      // 这个错，根据你个人的项目而定
      if(status != 1001){
        status = res.data.code;
        errFunction("token已失效，请重新登录")
        window.localStorage.clear();
        //强退
        VueRouter.push({
          name:'login'
        });
        //清除token
        return Promise.reject(res.data);
      }
    }else{
      return res.data;
    }
  },
  (err) => {
  // 错误操作根据你的项目而定
    if (err && err.response) {
      if (err.response.status == 401) {
        if(status != 401){
          status = err.response.status;
          errFunction("token已失效，请重新登录")
          window.localStorage.clear();
          //强退
          VueRouter.push({
            name:'login'
          });
          //清除token
        }
      } else {
        errFunction("服务器连接失败")
      }
    } else {
      errFunction("服务器连接失败")
    }
    return Promise.reject(err.response);
  }
);

export default service;

使用的情况下，可以直接导入引用，
例如：

import request from "@/service/axios.js";
/**
 * get请求
 * @param {*} params 
 */
export function loadArrangedOrgList(params) {
    return request({
      url: '/xx',
      method: 'get',
      params
    })
}

最后再在页面中引用调用就行了