vue2的axios二次封装

在src下创建一个http文件夹，在http文件夹创建request.js文件

//封装axios
import axios from "axios";
import { Message, Loading } from 'element-ui';
import router from "../router"
// 封装loading开启和结束函数
let loading;
function startLoading(){
  loading = Loading.service({
    lock:true,
    text:'拼命加载中...',
    background:'rgba(0,0,0,0.7)'
  })
}
function endLoading(){
  loading.close()
}

//1: 创建axios实例
const service = axios.create({
  //基地址
  baseURL:"",
  //baseURL:env.dev.baseUrl,
  settimeout: 5000,
});
//2:请求拦截
service.interceptors.request
  .use((config) => {
    //在发送请求之前做些什么，比如验证token之类的
    if(localStorage.eleToken){
      config.headers.Authorization = localStorage.eleToken
    }
    //开启loading
    startLoading();
    return config;
  },(error) => {
    //对错误请求做些什么
    //关闭loading
    endLoading();
    return Promise.reject(error)
  })

//3:响应拦截
service.interceptors.response.use(
  (response) =>{
    //关闭loading
    endLoading();
    return response;
  },
  (error) => {
    //对错误请求做些什么
    const {status} = error.response
    if(status == 401){
      Message.error('用户过期，请重新登录！')
      localStorage.removeItem("eleToken")
      router.push("/login")
    }
    //关闭loading
    endLoading();
    //提示信息
    Message.error(error.response.data.msg)
    return Promise.reject(error)
})
//4:抛出axios对象实例
export default  service;

在http文件夹里创建api.js文件

// 封装api
// 引入封装好的axios
import request from "./request"

// 向各个接口分发axios
export function loginForm(data) {
  return request({
    url: "",// 这个地址是去掉公共地址剩下的地址
    method: "",// 请求方式 支持多种方式  get post put delete 等等
    data,//发送请求要配置的参数 无参数的情况下也可以不写
  })
}