vue - - - - - vue3全局配置挂载axios_vue3全局挂载axios

1. 安装axios

yarn add axios

2. 配置拦截器

创建文件 /src/utils/request.js

"use strict";

import Vue from "vue";
import axios from "axios";
import { message } from "ant-design-vue";

const { baseUrl } = require("~/config"); // 全局配置的请求地址路径

let config = {
  baseURL: baseUrl,
  timeout: 60 * 1000,
  withCredentials: true,
};

const typewwwform = "application/x-www-form-urlencoded;charset=UTF-8",
  typemultipart = "multipart/form-data;charset=UTF-8",
  typejson = "application/json;charset=UTF-8";

const ShowErrorMessage = (msg = "网络错误", type = "error") => {
  message[type](msg);
};

const _axios = axios.create(config);

_axios.interceptors.request.use(
  function (config) {
    if (config.method === "post") {
      config.headers["Content-Type"] = typejson;
      return config;
    }
    return config;
  },
  function (error) {
    ShowErrorMessage(error);
    return Promise.reject(error);
  }
);

_axios.interceptors.response.use(
  function (response) {
    const { data } = response;
    if (data.ec != 200) {
      ShowErrorMessage(data.em);
    }

    if (data) return data;

    return response;
  },
  function (error) {
    ShowErrorMessage(error);
    return Promise.reject(error);
  }
);

export default _axios;
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56

3. vue.config.js代理配置

module.exports = {
  // ......
  devServer: {
    open: true,
    port: 8080,
    host: "0.0.0.0",
    https: false,
    hotOnly: true,
    disableHostCheck: true,
    proxy: {
      "/api": {
        target: "https://***.*****.com",
        changeOrigin: true,
        ws: true,
      },
    },
  },
};

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

4. 将axios全局挂载

main.js

import { createApp } from "vue";
import App from "./App.vue";
import router from "./router";
import store from "./store";
import "./assets/sass/_init.scss";
import Api from "./utils/request.js"; // 主要是这里，引入配置好的Api

import Antd from "ant-design-vue/es";
import "ant-design-vue/dist/antd.css";

const app = createApp(App);

app.config.globalProperties.$request = Api; // 全局挂载

app.use(store).use(router).use(Antd).mount("#app");
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

4. 文件内使用

<template>
  <div class="index">index</div>
</template>
<script>
import { onMounted, getCurrentInstance } from "vue";
export default {
  name: "Index",
  setup() {
    // 方式1:⬇️
    const currentInstance = getCurrentInstance(); // 获取全局实例
    const { $request } = currentInstance.appContext.config.globalProperties; // 找到挂载的axios配置
    const getUserInfo = () => {
      $request({
        url: "/api/my-info"
      }).then(res => {
        console.log("方式一 请求结果:", res);
      });
    };
    // 方式1:⬆️


    // 方式2:⬇️
    const { proxy } = getCurrentInstance();
    const getUserInfo2 = () => {
      proxy
        .$request({
          url: "/api/my-info"
        })
        .then(res => {
          console.log("方式二 请求结果:", res);
        });
    };
    // 方式2: ⬆️

    onMounted(() => {
      getUserInfo();
      getUserInfo2();
    });

    return {};
  }
};
</script> 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43

打印结果: