配置axios , 创建axios.js

调用stores参考

import axios from "axios";
import qs from "qs";
import { ElMessage} from 'element-plus';
import { useUserStore, usePinia } from "@/stores";
const userStore = useUserStore(usePinia); //必须这么调用 因为页面刷新会走这个，如果用const userStore = useUserStore()则会报错，因为页面渲染顺序问题
const service = axios.create({
  baseURL: "/api", 
  timeout: 5000,
  withCredentials: true,
   headers: {
     "Content-Type": "application/x-www-form-urlencoded;charset=UTF-8"
   }
});

// 刷新 access_token 的接口
const refreshToken = () => {
  return instance.post(
    "/login/automaticRenewalAccount",
    { token: userStore.getToken() },
    true
  );
};

service.interceptors.request.use(
  (config) => {
  
    if (config.method === "post") {
      let curPost = config.url.split("/")[config.url.split("/").length - 1];
      if (curPost === "uploadpicture" || curPost === "fileUpload") {
        return config; // 这里对上传文件/图片的 api 不做传参序列化处理
      } else {
        config.data = qs.stringify(config.data);
        return config;
      }
    }
    return config;
  },
  (error) => {
    return Promise.reject();
  }
);
service.interceptors.response.use(response => {
  //接收到响应数据并成功后的一些共有的处理，关闭loading等
   if (response.status === 200) {
      return response.data;
    } else {
      console.log(response);
      Promise.reject();
    }
}, error => {
   /***** 接收到异常响应的处理开始 *****/
  if (error && error.response) {
    // 1.公共错误处理
    // 2.根据响应码具体处理
    switch (error.response.status) {
      case 400:
        ElMessage.error('错误请求')
        break;
      case 401:
      const { config } = error;
      //刷新token
      if (!isRefreshing) {
        isRefreshing = true;
        return refreshToken()
          .then((res) => {
            userStore.setToken(res.data.data);
            //localStorage.setItem("token", token);
            config.headers.Authorization = `Bearer ${res.data.data}`;
            // token 刷新后将数组的方法重新执行
            requests.forEach((cb) => cb(res.data.data));
            requests = []; // 重新请求完清空
            return instance(config);
          })
          .catch((err) => {
            console.log("抱歉，您的登录状态已失效，请重新登录！");
            return Promise.reject(err);
          })
          .finally(() => {
            isRefreshing = false;
          });
      } else {
        // 返回未执行 resolve 的 Promise
        return new Promise((resolve) => {
          // 用函数形式将 resolve 存入，等待刷新后再执行
          requests.push((token) => {
            config.headers.Authorization = `Bearer ${token}`;
            resolve(instance(config));
          });
        });
      }
        //Message.error = '未授权，请重新登录'
        break;
      case 403:
       ElMessage.error('拒绝访问')
        break;
      case 404:
        ElMessage.error('请求错误,未找到该资源')
        break;
      case 405:
       ElMessage.error('请求方法未允许')
        break;
      case 408:
      ElMessage.error('请求超时')
        break;
      case 500:
        ElMessage.error('服务器端出错')
        break;
      case 501:
      ElMessage.error('网络未实现')
        break;
      case 502:
       ElMessage.error('网络错误')
        break;
      case 503:
       ElMessage.error('服务不可用')
        break;
      case 504:
       ElMessage.error('网络超时')
        break;
      case 505:
      ElMessage.error('http版本不支持该请求')
        break;
      default:
      ElMessage.error(`连接错误${error.response.status}`)
    }
  } else {
    // 超时处理
    if (qs.stringify(error).includes('timeout')) {
     ElMessage.error('服务器响应超时，请刷新当前页')
    }
    ElMessage.error('连接服务器失败')
  }

  //Message.error(error.message)
  /***** 处理结束 *****/
  //如果不需要错误处理，以上的处理过程都可省略
  return Promise.resolve(error.response)
})

export default service;

三、调用接口request.js

import http from "../utils/axios";

export const areaOrgFind = data => {
  return http({
    url: "/areaOrg/find",//接口
    method: "post",
    data: data
  });
};
export const areaOrgFind = id=> {
  return http({
    url: "/areaOrg/find",//接口
    method: "get",
    params: {
      compId: Id
    },
  });
};

四、页面调用

<template>
    <div>
        <div class="container">
        </div>
    </div>
</template>
 
<script>
    import { areaOrgFind } from '@/api/login'
    export default {
        data() {
            return {
                uuid: ""
            }
        },
        mounted() {
            this.areaOrgFinds()
        },
        methods: {
            async areaOrgFinds() {
                areaOrgFind(this.uuid)
				  .then(function (response) {
				    console.log(response);
				  })
				  .catch(function (error) {
				    console.log(error);
				  });       }
        }
    }
</script>