1：安装依赖:npm install --save axios

2：组件中单引入的方式

import ***axios*** from "axios";

3：全局引用

import { ***createApp*** } from "vue";  
import App from "./App.vue";  
import ***axios*** from "axios";  
  
let app = ***createApp***(App);  
app.config.globalProperties.$axios = axios;  
app.mount("#app");

3-1：在组件中通过调用

this.$aixos

4：在项目的src下创建文件夹utils，再创建request.js(或者http.js)文件，这是封装axios方法

//存放请求的方法
//通过 npm i axios  方法安装
import axios from "axios";
//通过 npm i querystring  方法安装
import querystring from "querystring";

const errorHandle = (status, info) => {
  switch (status) {
    case 400:
      console.log("语义有误");
      break;
    case 401:
      console.log("服务器认证失败");
      break;
    case 403:
      console.log("服务器拒绝访问");
      break;
    case 404:
      console.log("服务器拒绝访问");
      break;
    case 500:
      console.log("服务器遇到意外");
      break;
    case 502:
      console.log("服务器遇到意外");
      break;
    default:
      console.log("未知错误");
  }
};

const axiosInstance = axios.create({
  //网络请求的公共配置
  //公共请求路径
  // baseURL: "http://localhost:9080",
  //设置请求头
  headers: { "X-token-Header": "tokenValue" },
  //请求超时时间
  timeout: 50000,
});

//拦截器最常用的

//发送数据之前
axiosInstance.interceptors.request.use(
  //成功函数，config包含网络请求的所以信息
  (config) => {
    console.log("method", config.method);
    if (config.method === "post") {
      //将post的请求data数据转化成字符串
      config.data = querystring.stringify(config.data);
      console.log("这是一个post方法");
    }
    if (config.method === "get") {
      console.log("这是一个get方法");
    }
    return config;
  },
  //失败函数
  (error) => {
    return Promise.reject(error);
  }
);

//获取数据之前
axiosInstance.interceptors.response.use(
  (response) => {
    console.log("响应状态", response.status);
    return response.status === 200
      ? Promise.resolve(response)
      : Promise.reject(response);
  },
  (error) => {
    console.log("进入响应错误的信息", error.status);
    errorHandle(error.status, error.info);
  }
);
export default axiosInstance;

4-1：在项目的src下创建文件夹api，再创建path.js文件(存放全部的请求路径)与index.js文件，这是集中管理的网络请求

//存放所以的路径path.js
const allPathUrl = {
  baseUrl: "http://localhost:9080",
  getXXLInfoByPage: "/api/xxl-job-admin/jobinfo/pageList",
  updateXXLInfo: "/api/xxl-job-admin/jobinfo/update",
};
export default allPathUrl;

//存放请求的接口index.js
import path from "./path.js";

import axiosInstance from "@/utils/request.js";

const api = {
  getXXLInfoByPage(param) {
    return axiosInstance.get(path.getXXLInfoByPage, { params: param });
  },
};

export default api;

4-2：在项目中可以直接使用

<script setup>
import EelmentTable2 from "@/components/EelmentTable2.vue";
import { provide, reactive, ref, toRaw, watch } from "vue";
import api from "@/api/index.js";

const dataTwo = reactive([]);

const total = ref(0);

const start = ref(0);

const length = ref(10);

const triggerStatus = ref(0);

// 定义请求参数
const params = reactive({
  jobGroup: 11,
  triggerStatus: triggerStatus.value,
  start: start.value,
  length: length.value,
});

const getServerData = () => {
  api
    .getXXLInfoByPage(toRaw(params))
    .then((response) => {
      let data = response.data;
      console.log(data);
      console.log("ddd", params.start);
      dataTwo.splice(0);
      data.data.forEach((d) => {
        dataTwo.push(d);
      });
      total.value = data.recordsTotal;
    })
    .catch((error) => {
      console.log("请求失败", error);
    });

};

getServerData();
const getData = (newPage) => {
  console.log("4444", newPage);
};

provide("dataThree", total);
provide("pageNumber", start);

watch(start, (newValue) => {
  getServerData();
});
</script>

<template>
  <div>axios:父组件的当前页面：{{ start }}</div>
  <br />
  <!--  <EelmentTable :dataTwo="dataTwo" msg="我是props的消息" />-->

  <EelmentTable2 :dataTwo="dataTwo" msg="我是props的消息" @clickOne="getData" />
</template>