如何在Vue和TypeScript应用程序中正确地全局注册axios

o7jaxewo  于 2023-04-20  发布在  iOS
关注(0)|答案(2)|浏览(178)

我一直在与Vue、TypeScript和Axios作斗争,但我无法找到一个令人满意的解决方案。
大多数的向导会告诉你这样做:

Main.ts

import axios from 'axios';

Vue.prototype.$http = axios;

然后使用$http。TypeScript不喜欢这样:
属性“$http”在类型CombinedVueInstance上不存在
如何全局注册axios并避免任何TypeScript错误?
基于@GentlemanCrow下面的答案,我在我的根目录中创建了一个名为:
axios-plugin.d.ts

import _Vue from 'vue';
import Axios from 'axios';

export function AxiosPlugin<AxiosPlugOptions>(Vue: typeof _Vue, options?: AxiosPluginOptions): void {
    // do stuff with options
    Vue.prototype.$http = Axios;
}

export class AxiosPluginOptions {
    // add stuff
}

import { AxiosStatic } from 'axios';

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

这会产生错误:
(TS)不能在环境上下文中声明实现。
Vue.prototype.$http = Axios;上,错误是:
环境上下文中不允许使用语句。
删除export function AxiosPlugin函数并尝试执行请求错误:
TypeError:“this.$http is undefined”
下面的代码应该放在哪里?

export function AxiosPlugin<AxiosPlugOptions>(Vue: typeof _Vue, options?: AxiosPluginOptions): void {
    // do stuff with options
    Vue.prototype.$http = Axios;
}
piok6c0g

piok6c0g1#

我相信你必须将它注册为一个类型脚本声明文件-所以创建一个名为'axios-plugin.d.ts'的单独文件并放入:

import _Vue from 'vue';
import Axios from 'axios';

export function AxiosPlugin<AxiosPlugOptions>(Vue: typeof _Vue, options?: AxiosPluginOptions): void {
    // do stuff with options
    Vue.prototype.$http = Axios;
}

export class AxiosPluginOptions {
    // add stuff
}

import { AxiosStatic } from 'axios';

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

那么你应该可以在需要的地方访问Vue.$http
Vue.prototype.$http = axios;可以在纯javascript中工作,但Typescript迫使你声明所有内容,但你得到了甜蜜的类型检查。
你可以在这里看到一些关于定义文件的更一般的信息,沿着一个Axios示例:如何增加Vue类并保持类型脚本定义同步

6l7fqoea

6l7fqoea2#

以下是如何在Vue 3 TypeScript应用程序中创建全局Axios示例的示例:
首先,使用npm或yarn安装Axios:

npm install axios

接下来,创建一个新文件(例如axios.ts)来配置Axios示例:

import axios from 'axios';

    // Create a new Axios instance
    const instance = axios.create({
      baseURL: 'https://api.example.com',
      timeout: 5000,
      headers: {
        'Content-Type': 'application/json',
      },
    });

    // Add a request interceptor
    instance.interceptors.request.use((config) => {
      // Do something before the request is sent
      return config;
    }, error => {
      // Do something with request error
      return Promise.reject(error);
    });

    // Add a response interceptor
    instance.interceptors.response.use((response) => {
      // Do something with response data
      return response;
    }, error => {
      // Do something with response error
      return Promise.reject(error);
    });

    export default instance;

在Vue 3 TypeScript组件中,您可以导入Axios示例并使用它来发出API请求:

import axios from '@/axios';

export default {
  methods: {
    async fetchData() {
      try {
        const response = await axios.get('/data');
        console.log(response.data);
      } catch (error) {
        console.error(error);
      }
    },
  },
};

通过使用这种方法,您可以在所有组件中重用相同的Axios示例,并使用共享的设置和拦截器发出一致的API请求。

相关问题