[email protected]下使用axios 结合typescript


vue3.0没有全局的vue对象 需要使用app.config.globalProperties 去扩展全局方法
然后createApp(App).use(axios) 使用

use的用法

参数：

1
2
    {Object | Function} plugin
    ...options (可选)

用法：

1
2
3
4
5
6
7
安装 Vue.js 插件。如果插件是一个对象，它必须暴露一个 install 方法。
如果它本身是一个函数，它将被视为安装方法。

该安装方法将以应用实例作为第一个参数被调用。
传给 use 的其他 options 参数将作为后续参数传入该安装方法。

当在同一个插件上多次调用此方法时，该插件将仅安装一次。

axios.ts

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
"use strict";

import axios from "axios";

// Full config:  https://github.com/axios/axios#request-config
// axios.defaults.baseURL = process.env.baseURL || process.env.apiUrl || '';
// axios.defaults.headers.common['Authorization'] = AUTH_TOKEN;
// axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';

let config = {<!-- -->
  // baseURL: process.env.baseURL || process.env.apiUrl || ""
  // timeout: 60 * 1000, // Timeout
  // withCredentials: true, // Check cross-site Access-Control
};

const _axios = axios.create(config);

_axios.interceptors.request.use(
  function(config) {<!-- -->
    // Do something before request is sent
    return config;
  },
  function(error) {<!-- -->
    // Do something with request error
    return Promise.reject(error);
  }
);

// Add a response interceptor
_axios.interceptors.response.use(
  function(response) {<!-- -->
    // Do something with response data
    return response;
  },
  function(error) {<!-- -->
    // Do something with response error
    return Promise.reject(error);
  }
);

export default {<!-- -->
  install:function(app:any, options:any) {<!-- -->
    // 添加全局的方法
    app.config.globalProperties.axios = _axios;
    // 添加全局的方法
    app.config.globalProperties.$translate = (key: any) => {<!-- -->
        return key
    }
  }
}

main.ts

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
import {<!-- --> createApp } from 'vue'
import App from './App.vue'
// @ts-ignore
import axios from './plugins/axios.ts'
// @ts-ignore
import installElementPlus from './plugins/element.ts'

// 引入公共scss
import './element-variables.scss'

import router from './router'

const app = createApp(App).use(router).use(axios)
installElementPlus(app)
app.mount('#app')

使用Home.vue

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
<template>
    <div class="home">
        <div @click="clickEvent('2313216351')">
            2313216351
        </div>
    </div>
</template>

<script lang="ts">
    import {<!-- -->defineComponent,getCurrentInstance} from 'vue';
   

    export default defineComponent({<!-- -->
        name: 'Home',
       
        mounted(){<!-- -->
            // 使用
            const {<!-- --> proxy }:any = getCurrentInstance(); //获取上下文实例，ctx=vue2的this
            proxy.axios.post('api/Login',{<!-- -->card:111}).then((e:any)=>{<!-- -->
                console.log(e)
            })
        },
        methods: {<!-- -->
            clickEvent(num:string): void {<!-- -->
                alert(num)
            }
        }
    });
</script>
<style scoped lang="scss">
    .home {<!-- -->
        background: $--bg-color;

        div {<!-- -->
            color: $--color-primary;
        }
    }
</style>