axios封装代码（直接使用）

axios基础用法传送门（点击这里）

话不多说，直接上代码

一、在组件中调用 封装在http文件中

import axios from 'axios'

//创建axios实例
const axiosObj = axios.create({
    baseURL: 'http://api.web1024.cn',
    timeout: 8000,
    params: {
        key: 'gxn759'
    }
})

/**
 * 用于发送请求的通用方法
 * @param {*} options 配置信息，method请求方法，params参数，path路由
 * @returns 
 */
async function http({method = 'get',params,path}){

    let result

    if(method === 'get' || method === 'delete'){
        await axiosObj[method](path,{
            params
        }).then(res=>{
            result = res.data
        },err=>{
            result = err
        })
    }else if(method === 'post' || method === 'put' || method === 'patch'){
        await axiosObj[method](path,params).then(res=>{
            result = res.data
        },err=>{
            result = err
        })
    }

    return result

}

export default http

二、需要挂载到 Vue 的时候 直接导入文件 Vue.use(xxx) 就可以，Vuex 想用的时候, 直接导入以后直接使用就行
index.js

import axios from "axios";
import Auth from '@/assrts/js/auth/js'
import router from "@router/index.js";

// 基础配置
export const http = axios.create({
  baseURL: "http://api.web1024.cn",
  timeout: 8000,
  params: {
    key: "gxn759",
  },
});

// 请求拦截器
http.interceptors.request.use(
  function(config) {
    if (config.url != "/login") {
      config.headers["Authorization"] = Auth.getToken();
    }
    return config;
  },
  function(err) {
    return Promise.reject(err);
  }
);

// 响应拦截器
http.interceptors.response.use(
  function(response) {
    const { meta } = response.data;
    if (meta.status === 403) {
      window.alert("您没有权限执行该操作");
    } else if (meta.status === 401) {
      window.alert("你的登录信息有误,请重新登录!");
      router.push({
        name: "login",
        query: {
          redirect: window.location.hash,
        },
      });
    }
    return response;
  },
  function(err) {
    return Promise.reject(err);
  }
);

//最后
const httpPlugin = {};

httpPlugin.install = function(Vue) {
  Vue.prototype.$http = http;
};