Vue 中使用 TypeScript axios 使用方式

Vue 中使用 TypeScript

axios 使用方式

方式一

import axios from 'axios';
Vue.prototype.$axios = axios;

// 在 .vue 文件中使用
// 使用 this as any 是去掉 ts 的類型檢測 axios 是掛載成功的
(this as any).$axios.get('http://www.baidu.com').then((res: any) => {
      console.log(res);
    });

方式二

import axios, { AxiosInstance } from 'axios'

declare module 'Vue/types/vue' {
  interface Vue {
    $http: AxiosInstance
  }
}

// 在 .vue 文件中使用
this.$axios.get('http://www.baidu.com').then((res: any) => {
      console.log(res);
    });

方式三

import axios from 'axios';
import VueAxios from 'vue-axios';

Vue.use(VueAxios, axios)

// 在 .vue 文件中使用
this.$axios.get('http://www.baidu.com').then((res: any) => {
    console.log(res);
});

方式四

// 在 .vue 文件中直接導入
import axios from "axios";

axios.get('http://www.baidu.com', {}).then((res: any) => {
    console.log(res);
});

后續方式持續補充